Added Molecules / ErrorBanner

Author: wintondeshong

src/assets/scss/6-components/molecules/__molecules.scss

@@ -1,5 +1,8 @@
 /*------------------------------------*\
   MOLECULES
 \*------------------------------------*/
+@import "card";
+@import "dropdown-button";
+@import "error-banner";
 @import "form-fields";
 @import "forms";

src/assets/scss/6-components/molecules/_card.scss

@@ -0,0 +1,42 @@
+.c-card {
+    position: relative;
+    box-shadow: 0px 3px 10px rgba(0, 26, 57, 0.2);
+
+    &__content {
+        background-color: #425163;
+        height: 147px;
+        border-radius: 5px 5px 0 0;
+        @include padding(16px);
+        position: relative;
+
+        p {
+            @include font-style($font-primary, "base", white, 400, 24px);
+            position: absolute;
+            bottom: 16px;
+            display: -webkit-box;
+            -webkit-line-clamp: 3;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+        }
+    }
+
+    &__label {
+        background: white;
+        bottom: 0;
+        width: 100%;
+        border-radius: 0 0 5px 5px;
+        border: 1px solid #8d98a5;
+
+        p {
+            @include font-style(
+                $font-primary,
+                "small",
+                get-color("neutral", "dark-text")
+            );
+            @include padding(0, 16px);
+            @include margin(0);
+            letter-spacing: 0.02em;
+            font-style: italic;
+        }
+    }
+}

src/assets/scss/6-components/molecules/_dropdown-button.scss

@@ -0,0 +1,28 @@
+.c-dropdown-button {
+    svg {
+        vertical-align: middle;
+    }
+
+    &__list {
+        @include box-shadow(0, 7px, 20px, rgba(0, 26, 57, 0.3));
+        @include margin-top(8px);
+        @include margin-left(64px);
+        @include font-style($size: "small");
+        background-color: get-color-neutral("white");
+        border-radius: $border-radius-small;
+
+        &__item {
+            @include padding(12px);
+            min-width: rem(162px);
+            cursor: pointer;
+
+            &:hover,
+            &:focus,
+            &:focus-within,
+            &[data-selected] {
+                // [data-selected] comes from the @reach-ui/menu-button component
+                background-color: get-color-neutral("05");
+            }
+        }
+    }
+}

src/assets/scss/6-components/molecules/_error-banner.scss

@@ -0,0 +1,23 @@
+.c-error-banner {
+    @include padding(8px, 24px, 8px, 32px);
+    @include font-style(
+        $font-primary,
+        "xsmall",
+        false,
+        400,
+        get-line-height("xsmall")
+    );
+    color: get-color-status("error-dark");
+    background-color: get-color-status("error-light");
+    border-radius: $border-radius-small;
+    position: relative;
+
+    svg {
+        position: absolute;
+        left: rem(8px);
+        top: rem(10px);
+        path {
+            fill: get-color-primary("error");
+        }
+    }
+}

src/index.ts

@@ -60,6 +60,8 @@ export * from "./atoms/interfaces/svg-icon";
 
 export { AccessibleList } from "./molecules/accessible-list/accessible-list";
 export { Card } from "./molecules/cards/card";
+export { DropdownButton } from "./molecules/dropdown-button/dropdown-button";
+export { ErrorBanner } from "./molecules/errors/error-banner";
 
 // #endregion Molecules
 

src/molecules/errors/error-banner.stories.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { text } from "@storybook/addon-knobs";
+import { ErrorBanner } from "./error-banner";
+
+export default {
+    component: ErrorBanner,
+    title: "Molecules | Errors / Error Banner",
+};
+
+export const errorBannerDefault = () => (
+    <ErrorBanner text={text("Text", "This is an error message.")} />
+);

src/molecules/errors/error-banner.test.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import { ErrorBanner } from "./error-banner";
+import faker from "faker";
+
+describe("ErrorBanner", () => {
+    test("when default props, renders banner", () => {
+        // Arrange
+        const expected = faker.random.words();
+
+        // Act
+        const { getByText } = render(<ErrorBanner text={expected} />);
+
+        // Assert
+        expect(getByText(expected)).not.toBeNull();
+    });
+});

src/molecules/errors/error-banner.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { Icon } from "../../atoms/icons/icon";
+import { Icons } from "../../atoms/constants/icons";
+
+// -----------------------------------------------------------------------------------------
+// #region Constants
+// -----------------------------------------------------------------------------------------
+
+const COMPONENT_CLASS = "c-error-banner";
+
+// #endregion Constants
+
+// -----------------------------------------------------------------------------------------
+// #region Interfaces
+// -----------------------------------------------------------------------------------------
+
+interface ErrorBannerProps {
+    text: string;
+}
+
+// #endregion Interfaces
+
+// -----------------------------------------------------------------------------------------
+// #region Component
+// -----------------------------------------------------------------------------------------
+
+const ErrorBanner: React.FC<ErrorBannerProps> = (props: ErrorBannerProps) => (
+    <div className={COMPONENT_CLASS}>
+        <Icon type={Icons.Information} />
+        {props.text}
+    </div>
+);
+
+// #endregion Component
+
+// -----------------------------------------------------------------------------------------
+// #region Exports
+// -----------------------------------------------------------------------------------------
+
+export { ErrorBanner };
+
+// #endregion Exports