Merge pull request #16 from wintondeshong/feature/initial-atom-components

Initial atom components

Author: wintondeshong

.storybook/config.js

@@ -4,6 +4,10 @@ import { withKnobs } from "@storybook/addon-knobs";
 import { withInfo } from "@storybook/addon-info";
 import "./storybook.css";
 import "assets/scss/andculturecode-javascript-react-components.scss";
+import { IconUtils } from "utilities/icon-utils";
+import { SvgIcons } from "atoms/constants/svg-icons";
+
+IconUtils.register(SvgIcons);
 
 setDefaults({
     header: true,

src/assets/scss/4-elements/__elements.scss

@@ -12,3 +12,11 @@
 
 @import "anchors";
 @import "buttons";
+@import "checkboxes";
+@import "fieldsets";
+@import "forms";
+@import "headings";
+@import "inputs";
+@import "lists";
+@import "paragraphs";
+@import "text-area";

src/assets/scss/4-elements/_checkboxes.scss

@@ -0,0 +1,71 @@
+.e-checkbox {
+    @include font-style(
+        $font-primary,
+        "small",
+        get-color("primary", "black"),
+        400,
+        20px
+    );
+    @include padding-left(36px);
+    @include margin(2px, 0px);
+    display: block;
+    position: relative;
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+
+    &.-disabled {
+        cursor: not-allowed;
+    }
+
+    &:hover input ~ .e-checkbox__checkmark {
+        background-color: #ccc;
+    }
+
+    input {
+        position: absolute;
+        opacity: 0;
+        cursor: pointer;
+        height: 0;
+        width: 0;
+
+        &:checked ~ .e-checkbox__checkmark:after {
+            display: block;
+        }
+
+        &:focus ~ .e-checkbox__checkmark {
+            border-color: get-color-neutral("dark-text");
+        }
+    }
+
+    &__checkmark {
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 20px;
+        width: 20px;
+        border: 1px solid #bdc4c9;
+        box-sizing: border-box;
+        border-radius: 5px;
+
+        &:after {
+            content: "";
+            position: absolute;
+            display: none;
+        }
+
+        &:after {
+            left: 7px;
+            top: 4px;
+            width: 5px;
+            height: 10px;
+            border: solid get-color("neutral", "dark-text");
+            border-width: 0 3px 3px 0;
+            -webkit-transform: rotate(45deg);
+            -ms-transform: rotate(45deg);
+            transform: rotate(45deg);
+        }
+    }
+}

src/assets/scss/4-elements/_fieldsets.scss

@@ -0,0 +1,4 @@
+fieldset {
+    border: none;
+    margin: none;
+}

src/assets/scss/4-elements/_forms.scss

@@ -0,0 +1,3 @@
+/*------------------------------------*\
+  FORMS
+\*------------------------------------*/

src/assets/scss/4-elements/_headings.scss

@@ -0,0 +1,13 @@
+/*------------------------------------*\
+  HEADINGS
+\*------------------------------------*/
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    -webkit-margin-before: 0;
+    -webkit-margin-after: 0;
+}

src/assets/scss/4-elements/_inputs.scss

@@ -0,0 +1,30 @@
+input {
+    @include placeholder() {
+        color: get-color-neutral("70");
+    }
+    @include font-style($font-primary, "base", get-color-neutral("90"), 400);
+    @include padding(13px, 18px);
+
+    border: 1px solid get-color-neutral("30");
+    border-radius: 5px;
+    box-sizing: border-box;
+
+    &:focus {
+        @include placeholder() {
+            color: get-color-neutral("50");
+        }
+    }
+    &:placeholder-shown {
+        text-overflow: ellipsis;
+    }
+
+    &[type="email"]:disabled,
+    &[type="password"]:disabled,
+    &[type="text"]:disabled {
+        background-color: get-color-neutral("05");
+        border-color: get-color-neutral("50");
+        -webkit-text-fill-color: get-color-neutral("90");
+        opacity: 1; /* required on iOS */
+        cursor: not-allowed;
+    }
+}

src/assets/scss/4-elements/_lists.scss

@@ -0,0 +1,31 @@
+/*------------------------------------*\
+  LISTS
+\*------------------------------------*/
+
+ul {
+    position: relative;
+    list-style: none;
+    margin-left: 0;
+
+    > li {
+        @include margin-bottom(10px);
+    }
+
+    &.-has-icon {
+        li {
+            @include padding-left(10px);
+        }
+
+        &.-check > li:before {
+            position: absolute;
+            left: 0;
+            font-size: 20px;
+        }
+    }
+}
+
+ol {
+    > li {
+        @include margin-bottom(10px);
+    }
+}

src/assets/scss/4-elements/_paragraphs.scss

@@ -0,0 +1,6 @@
+/*------------------------------------*\
+  PARAGRAPHS
+\*------------------------------------*/
+
+p {
+}

src/assets/scss/4-elements/_text-area.scss

@@ -0,0 +1,22 @@
+textarea {
+    @include placeholder() {
+        color: get-color-neutral("70");
+    }
+    @include font-style(
+        $font-primary,
+        "base",
+        get-color-neutral("dark-text"),
+        400
+    );
+    @include padding(13px, 18px);
+
+    &:focus {
+        @include placeholder() {
+            color: get-color-neutral("50");
+        }
+    }
+
+    border: 1px solid get-color-neutral("30");
+    border-radius: 5px;
+    box-sizing: border-box;
+}