Skip to content

Commit 8b04290

Browse files
wintondeshongwintondeshong
authored
Merge pull request #20 from wintondeshong/master
Port common molecule components
2 parents f0c93cd + 4b3a203 commit 8b04290

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

56 files changed

+2164
-12
lines changed

‎package-lock.json‎

Lines changed: 152 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@
2121
"url": "https://github.com/AndcultureCode/AndcultureCode.JavaScript.React.Components/issues"
2222
},
2323
"dependencies": {
24+
"@reach/menu-button": "0.10.2",
25+
"@tippyjs/react": "4.0.2",
2426
"@types/react": "16.9.11",
2527
"@types/react-dom": "16.9.3",
2628
"@types/react-router-dom": "5.1.5",

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
/*------------------------------------*\
22
MOLECULES
33
\*------------------------------------*/
4+
@import "card";
5+
@import "dropdown-button";
6+
@import "error-banner";
47
@import "form-fields";
58
@import "forms";
9+
@import "radio-list";
10+
@import "tooltip";

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

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
.c-card {
2+
position: relative;
3+
box-shadow: 0px 3px 10px rgba(0, 26, 57, 0.2);
4+
5+
&__content {
6+
@include padding(16px);
7+
background-color: #425163;
8+
height: 147px;
9+
border-radius: 5px 5px 0 0;
10+
position: relative;
11+
12+
p {
13+
@include font-style($font-primary, "base", white, 400, 24px);
14+
position: absolute;
15+
bottom: 16px;
16+
display: -webkit-box;
17+
-webkit-line-clamp: 3;
18+
-webkit-box-orient: vertical;
19+
overflow: hidden;
20+
}
21+
}
22+
23+
&__label {
24+
background: white;
25+
bottom: 0;
26+
width: 100%;
27+
border-radius: 0 0 5px 5px;
28+
border: 1px solid #8d98a5;
29+
30+
p {
31+
@include font-style(
32+
$font-primary,
33+
"small",
34+
get-color-neutral("dark-text")
35+
);
36+
@include padding(0, 16px);
37+
@include margin(0);
38+
letter-spacing: 0.02em;
39+
font-style: italic;
40+
}
41+
}
42+
}

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
.c-dropdown-button {
2+
svg {
3+
vertical-align: middle;
4+
}
5+
6+
&__list {
7+
@include box-shadow(0, 7px, 20px, rgba(0, 26, 57, 0.3));
8+
@include margin-top(8px);
9+
@include margin-left(64px);
10+
@include font-style($size: "small");
11+
background-color: get-color-neutral("white");
12+
border-radius: $border-radius-small;
13+
14+
&__item {
15+
@include padding(12px);
16+
min-width: rem(162px);
17+
cursor: pointer;
18+
19+
&:hover,
20+
&:focus,
21+
&:focus-within,
22+
&[data-selected] {
23+
// [data-selected] comes from the @reach-ui/menu-button component
24+
background-color: get-color-neutral("05");
25+
}
26+
}
27+
}
28+
}

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
.c-error-banner {
2+
@include padding(8px, 24px, 8px, 32px);
3+
@include font-style(
4+
$font-primary,
5+
"xsmall",
6+
false,
7+
400,
8+
get-line-height("xsmall")
9+
);
10+
color: get-color-status("error-dark");
11+
background-color: get-color-status("error-light");
12+
border-radius: $border-radius-small;
13+
position: relative;
14+
15+
svg {
16+
position: absolute;
17+
left: rem(8px);
18+
top: rem(10px);
19+
path {
20+
fill: get-color-primary("error");
21+
}
22+
}
23+
}

‎src/assets/scss/6-components/molecules/_radio-list.scss‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
.c-radio-list {
2+
> ul {
3+
> li {
4+
margin-bottom: 0;
5+
border-bottom: 1px solid get-color-neutral("30");
6+
> .c-radio {
7+
position: relative;
8+
&:hover {
9+
background-color: get-color-neutral("white");
10+
}
11+
&.-selected {
12+
background-color: get-color-accents("blue-light");
13+
&:hover {
14+
background-color: darken(
15+
get-color-accents("blue-light"),
16+
5%
17+
);
18+
}
19+
}
20+
21+
> label {
22+
position: static;
23+
width: 100%;
24+
&:before {
25+
top: calc(50% - 10px);
26+
right: 10px;
27+
}
28+
&:after {
29+
top: calc(50% - 5px);
30+
right: 15px; // 10px right + 1/2 of my width
31+
}
32+
}
33+
}
34+
}
35+
}
36+
37+
&.-button-style {
38+
> ul {
39+
> li {
40+
border: none;
41+
42+
> .c-radio {
43+
@include padding(0, 0, 0, 8px);
44+
border-radius: $border-radius-large;
45+
border: 1px solid get-color-neutral("30");
46+
47+
&:focus-within, // Styles for native implmentation of :focus-within.
48+
&.focus-within, // Styles for polyfill implementation to support IE. When grouping selectors together, IE doesn't display desired styles.
49+
&:hover {
50+
@include c-radio-focus-hover;
51+
}
52+
53+
&.-selected {
54+
background-color: get-color-accents("blue-dark");
55+
56+
> label {
57+
color: get-color-neutral("white");
58+
}
59+
}
60+
61+
> label {
62+
@include padding(8px);
63+
@include padding-left(32px);
64+
color: get-color-accents("blue-dark");
65+
padding-right: 0;
66+
67+
&:before {
68+
right: unset;
69+
left: rem(10px);
70+
}
71+
72+
&:after {
73+
right: unset;
74+
left: rem(15px);
75+
}
76+
}
77+
}
78+
}
79+
}
80+
}
81+
}

0 commit comments

Comments
 (0)