Added atoms select

Author: wintondeshong

src/assets/scss/6-components/atoms/__atoms.scss

@@ -3,3 +3,7 @@
 \*------------------------------------*/
 @import "buttons";
 @import "checkbox-button";
+@import "labels";
+@import "radios";
+@import "selects";
+@import "text-input-icon";

src/assets/scss/6-components/atoms/_labels.scss

@@ -0,0 +1,11 @@
+.c-label {
+    @include font-style(
+        $font-primary,
+        "xsmall",
+        get-color-neutral("70"),
+        700,
+        18px
+    );
+    letter-spacing: 0.15em;
+    text-transform: uppercase;
+}

src/assets/scss/6-components/atoms/_radios.scss

@@ -0,0 +1,78 @@
+.c-radio {
+    @include padding(16px);
+
+    &:hover {
+        cursor: pointer;
+    }
+
+    input {
+        &:checked,
+        &:not(:checked) {
+            position: absolute;
+            left: -9999px;
+        }
+        &:checked + label,
+        &:not(:checked) + label {
+            @extend p;
+            @include padding-right(40px);
+            position: relative;
+            display: inline-block;
+            color: get-color-neutral("90");
+            cursor: pointer;
+            &:before {
+                content: "";
+                position: absolute;
+                right: 0;
+                top: 3px;
+                width: 20px;
+                height: 20px;
+                background: #fff;
+                border: 1px solid get-color-accents("blue-base");
+                border-radius: 100%;
+            }
+            &:after {
+                position: absolute;
+                top: 8px;
+                right: 5px;
+                content: "";
+                width: 10px;
+                height: 10px;
+                background: get-color-accents("blue-base");
+                border-radius: 100%;
+                -webkit-transition: all 0.2s ease;
+                transition: all 0.2s ease;
+            }
+        }
+        &:focus + label {
+            &:before {
+                border: 1px solid get-color-accents("blue-dark");
+            }
+            &::after {
+                background: get-color-accents("blue-dark");
+            }
+        }
+        &:not(:checked) + label:before {
+            border-color: get-color-neutral("30");
+        }
+        &:not(:checked) + label:after {
+            opacity: 0;
+            -webkit-transform: scale(0);
+            transform: scale(0);
+        }
+        &:checked + label:after {
+            opacity: 1;
+            -webkit-transform: scale(1);
+            transform: scale(1);
+        }
+    }
+    label {
+        @extend p;
+        @extend .-small;
+        letter-spacing: 0.02em;
+        word-break: break-word;
+
+        p {
+            color: get-color-neutral("70");
+        }
+    }
+}

src/assets/scss/6-components/atoms/_selects.scss

@@ -0,0 +1,44 @@
+.c-select {
+    position: relative;
+    display: inline-block;
+    @include icon-fill(get-color-neutral("30"));
+
+    &:hover {
+        select {
+            border: 1px solid get-color-neutral("50");
+        }
+
+        @include icon-fill(get-color-neutral("50"));
+    }
+
+    select {
+        @include padding(8px);
+        @include padding-right(32px);
+        @include font-style($color: get-color-neutral("90"));
+        border: 1px solid get-color-neutral("30");
+        border-radius: $border-radius-small;
+        height: rem(40px);
+
+        // hides default arrow so we can place our chevron down icon instead
+        -moz-appearance: none;
+        -webkit-appearance: none;
+        appearance: none;
+
+        &::-ms-expand {
+            // hide default arrow in IE 11
+            display: none;
+        }
+
+        option {
+            @include font-style($color: get-color-neutral("90"));
+        }
+    }
+
+    .c-icon {
+        position: absolute;
+        right: 8px;
+        top: 12px;
+        // forward pointer events to the <select> underneath the icon
+        pointer-events: none;
+    }
+}

src/assets/scss/6-components/atoms/_text-input-icon.scss

@@ -0,0 +1,17 @@
+.c-text-input-icon {
+    position: relative;
+
+    .c-icon {
+        position: absolute;
+        left: 0;
+        top: calc(50% - 14px);
+        path {
+            fill: get-color-neutral("50");
+        }
+    }
+    input {
+        border: none;
+        padding-left: 30px;
+        width: 100%;
+    }
+}

src/atoms/forms/select.stories.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { text } from "@storybook/addon-knobs";
+import { Select } from "./select";
+import Faker from "faker";
+
+export default {
+    component: Select,
+    title: "Atoms | Forms / Select",
+};
+
+export const selectKnobs = () => (
+    <Select
+        // disabled={boolean("Disabled", false)}
+        id={Faker.random.uuid()}
+        onChange={() => {}}
+        options={[
+            { label: "Label 1", value: "Value1" },
+            { label: "Label 2", value: "Value2" },
+        ]}
+        value={text("Value", "Input Value")}
+    />
+);

src/atoms/forms/select.test.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+describe("Select", () => {
+    test.skip("TODO - https://github.com/AndcultureCode/AndcultureCode.JavaScript.React.Components/issues/11", () => {});
+});

src/atoms/forms/select.tsx

@@ -0,0 +1,71 @@
+import React, { ChangeEvent } from "react";
+import { StringUtils } from "andculturecode-javascript-core";
+import { Icons } from "../constants/icons";
+import { Icon } from "../icons/icon";
+
+// -----------------------------------------------------------------------------------------
+// #region Interfaces
+// -----------------------------------------------------------------------------------------
+
+export interface SelectProps<T = any> {
+    cssClassName?: string;
+    id: string;
+    onChange: (selectedOption?: SelectOption<T>) => void;
+    name?: string;
+    options: SelectOption<T>[];
+    value?: string;
+}
+
+export interface SelectOption<T = any> {
+    data?: T;
+    label: string;
+    value: string;
+}
+
+// #endregion Interfaces
+
+// -----------------------------------------------------------------------------------------
+// #region Component
+// -----------------------------------------------------------------------------------------
+
+const Select: React.FC<SelectProps> = (props: SelectProps) => {
+    const classNames = ["c-select"];
+    if (StringUtils.hasValue(props.cssClassName)) {
+        classNames.push(props.cssClassName!);
+    }
+
+    const selectOptions = props.options.map((option) => (
+        <option key={option.value} value={option.value}>
+            {option.label}
+        </option>
+    ));
+
+    const handleChange = (e: ChangeEvent<HTMLSelectElement>) => {
+        const option = props.options.find(
+            (o: SelectOption) => o.value === e.target.value
+        );
+        props.onChange(option);
+    };
+
+    return (
+        <div className={classNames.join(" ")}>
+            <select
+                onChange={handleChange}
+                value={props.value}
+                name={props.name}>
+                {selectOptions}
+            </select>
+            <Icon type={Icons.ChevronDown} />
+        </div>
+    );
+};
+
+// #endregion Component
+
+// -----------------------------------------------------------------------------------------
+// #region Exports
+// -----------------------------------------------------------------------------------------
+
+export { Select };
+
+// #endregion Exports

src/index.ts

@@ -10,6 +10,7 @@ export { Button } from "./atoms/buttons/button";
 export { CheckboxButton } from "./atoms/forms/checkbox-button";
 export { CheckboxInput } from "./atoms/forms/checkbox-input";
 export { PasswordInput } from "./atoms/forms/password-input";
+export { Select } from "./atoms/forms/select";
 export { SubmitButton } from "./atoms/forms/submit-button";
 export { TextArea } from "./atoms/forms/text-area";
 export { TextInput } from "./atoms/forms/text-input";