Skip to content

Commit e2e85e8

Browse files
carlosvallecarlosvalle
committed
Add menu component
1 parent 55ce567 commit e2e85e8

8 files changed

Lines changed: 134 additions & 20 deletions

File tree

‎src/components/13-menu/menu.config.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
title: "Menu",
3+
status: "wip",
4+
context: {}
5+
};

‎src/components/13-menu/menu.njk‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<div class="sds-overlay minw-menu maxw-mobile radius-overlay">
2+
<div class="sds-menu">
3+
<div class="sds-menu__header">
4+
<span class="sds-menu__header-title">Actions</span>
5+
<button class="sds-menu__header-button" aria-label="Close Menu">
6+
<i class="fas fa-times"></i>
7+
</button>
8+
</div>
9+
<button class="sds-menu__item">
10+
<span class="fa-layers fa-fw fa-2x">
11+
<i
12+
class="fas fa-circle text-base-lighter"
13+
data-fa-transform="left-3"
14+
></i>
15+
<i
16+
class="fas fa-question text-base"
17+
data-fa-transform="shrink-9 left-3"
18+
></i>
19+
</span>
20+
Download
21+
</button>
22+
<button class="sds-menu__item">
23+
<span class="fa-layers fa-fw fa-2x">
24+
<i
25+
class="fas fa-circle text-base-lighter"
26+
data-fa-transform="left-3"
27+
></i>
28+
<i
29+
class="fas fa-question text-base"
30+
data-fa-transform="shrink-9 left-3"
31+
></i>
32+
</span>
33+
Follow
34+
</button>
35+
<button class="sds-menu__item">
36+
<span class="fa-layers fa-fw fa-2x">
37+
<i
38+
class="fas fa-circle text-base-lighter"
39+
data-fa-transform="left-3"
40+
></i>
41+
<i
42+
class="fas fa-question text-base"
43+
data-fa-transform="shrink-9 left-3"
44+
></i> </span
45+
>Share
46+
</button>
47+
</div>
48+
</div>

‎src/components/icons/icons.njk‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,67 +2,67 @@
22
<div class="grid-row flex-row">
33
<ul class="usa-list usa-list--unstyled grid-row flex-wrap">
44
<li class="display-block padding-2 text-center">
5-
<i class="sam icon-bell icon-2x"></i>
5+
<i class="sam fa-bell fa-2x"></i>
66
<p class="font-sans-3xs margin-x-auto">Bell</p>
77
</li>
88
<li class="display-block padding-2 text-center">
9-
<i class="sam icon-book icon-2x"></i>
9+
<i class="sam fa-book fa-2x"></i>
1010
<p class="font-sans-3xs">Book</p>
1111
</li>
1212
<li class="display-block padding-2 text-center">
13-
<i class="sam icon-calendar icon-2x"></i>
13+
<i class="sam fa-calendar fa-2x"></i>
1414
<p class="font-sans-3xs">Calendar</p>
1515
</li>
1616
<li class="display-block padding-2 text-center">
17-
<i class="sam icon-download icon-2x"></i>
17+
<i class="sam fa-download fa-2x"></i>
1818
<p class="font-sans-3xs">Download</p>
1919
</li>
2020
<li class="display-block padding-2 text-center">
21-
<i class="sam icon-envelope icon-2x"></i>
21+
<i class="sam fa-envelope fa-2x"></i>
2222
<p class="font-sans-3xs">Envelope</p>
2323
</li>
2424
<li class="display-block padding-2 text-center">
25-
<i class="sam icon-file-chart-line icon-2x"></i>
25+
<i class="sam fa-file-chart-line fa-2x"></i>
2626
<p class="font-sans-3xs">File Chart Line</p>
2727
</li>
2828
<li class="display-block padding-2 text-center">
29-
<i class="sam icon-filter icon-2x"></i>
29+
<i class="sam fa-filter fa-2x"></i>
3030
<p class="font-sans-3xs">Filter</p>
3131
</li>
3232
<li class="display-block padding-2 text-center">
33-
<i class="sam icon-home icon-2x"></i>
33+
<i class="sam fa-home fa-2x"></i>
3434
<p class="font-sans-3xs">Home</p>
3535
</li>
3636
<li class="display-block padding-2 text-center">
37-
<i class="sam icon-invoice icon-2x"></i>
37+
<i class="sam fa-invoice fa-2x"></i>
3838
<p class="font-sans-3xs">Invoice</p>
3939
</li>
4040
<li class="display-block padding-2 text-center">
41-
<i class="sam icon-link icon-2x"></i>
41+
<i class="sam fa-link fa-2x"></i>
4242
<p class="font-sans-3xs">Link</p>
4343
</li>
4444
<li class="display-block padding-2 text-center">
45-
<i class="sam icon-new-note icon-2x"></i>
45+
<i class="sam fa-new-note fa-2x"></i>
4646
<p class="font-sans-3xs">New Note</p>
4747
</li>
4848
<li class="display-block padding-2 text-center">
49-
<i class="sam icon-print icon-2x"></i>
49+
<i class="sam fa-print fa-2x"></i>
5050
<p class="font-sans-3xs">Print</p>
5151
</li>
5252
<li class="display-block padding-2 text-center">
53-
<i class="sam icon-ruler-pencil icon-2x"></i>
53+
<i class="sam fa-ruler-pencil fa-2x"></i>
5454
<p class="font-sans-3xs">Ruler Pencil</p>
5555
</li>
5656
<li class="display-block padding-2 text-center">
57-
<i class="sam icon-share icon-2x"></i>
57+
<i class="sam fa-share fa-2x"></i>
5858
<p class="font-sans-3xs">Share</p>
5959
</li>
6060
<li class="display-block padding-2 text-center">
61-
<i class="sam icon-trash icon-2x"></i>
61+
<i class="sam fa-trash fa-2x"></i>
6262
<p class="font-sans-3xs">Trash</p>
6363
</li>
6464
<li class="display-block padding-2 text-center">
65-
<i class="sam icon-user icon-2x"></i>
65+
<i class="sam fa-user fa-2x"></i>
6666
<p class="font-sans-3xs">User</p>
6767
</li>
6868
</ul>

‎src/js/components/icons.js‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { config, library, dom } from "@fortawesome/fontawesome-svg-core";
1+
import { library, dom } from "@fortawesome/fontawesome-svg-core";
22
import {
33
faSquare,
44
faEdit,
@@ -8,6 +8,9 @@ import {
88
faAngleRight,
99
faAngleLeft,
1010
faExclamationCircle,
11+
faTimes,
12+
faQuestion,
13+
faCircle
1114
} from "@fortawesome/free-solid-svg-icons";
1215
import { samBars } from "./../icons/bars";
1316
import { samArrowLeft } from "./../icons/arrowLeft";
@@ -29,17 +32,18 @@ import { samDownload } from "./../icons/download";
2932
import { samInvoice } from "./../icons/invoice";
3033
import { samPaperPlane } from "./../icons/paperPlane";
3134

32-
config.familyPrefix = "icon";
33-
3435
const icons = [
3536
faSquare,
37+
faCircle,
3638
faEdit,
3739
faComment,
3840
faTh,
3941
faSignOutAlt,
4042
faAngleRight,
4143
faAngleLeft,
4244
faExclamationCircle,
45+
faTimes,
46+
faQuestion,
4347
samBars,
4448
samArrowLeft,
4549
samBell,

‎src/stylesheets/components/_menu.scss‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
.sds-menu {
2+
@include u-padding-top(1);
3+
@include u-padding-bottom('105');
4+
}
5+
6+
.sds-menu__header {
7+
display: flex;
8+
align-items: center;
9+
justify-content: space-between;
10+
padding: 0 10px 5px 20px;
11+
margin-bottom: 3px;
12+
border-bottom: 1px solid #eae6e6;
13+
}
14+
15+
.sds-menu__header-title {
16+
font-size: 18px;
17+
font-weight: 600;
18+
color: #2e2e2a;
19+
}
20+
21+
.sds-menu__header-button {
22+
padding: 5px 10px;
23+
border-radius: 50%;
24+
background-color: #c7c7c7;
25+
border: none;
26+
color: white;
27+
}
28+
29+
.sds-menu__item {
30+
@include button-unstyled;
31+
display: flex;
32+
align-items: center;
33+
padding: 6px 20px;
34+
width: 100%;
35+
text-decoration: none;
36+
font-weight: 600;
37+
font-size: 17px;
38+
&:hover {
39+
text-decoration: none;
40+
}
41+
}

‎src/stylesheets/components/_overlay.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.sds-overlay {
2+
@include u-overflow('auto');
3+
@include u-bg('white');
4+
@include u-shadow(3);
5+
}

‎src/stylesheets/theme/_sds-theme-custom-styles.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,8 @@ SAM THEME CUSTOM STYLES
2828
@import '../components/footer';
2929
@import '../components/pagination';
3030
@import '../components/resultsList';
31+
@import '../components/menu';
32+
@import '../components/overlay';
3133

3234
// Code samples ---------------------- //
3335

‎src/stylesheets/theme/_sds-theme-utilities.scss‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,4 +29,13 @@ $background-color-palettes: ('palette-color-state');
2929

3030
// .border-radius
3131

32-
$border-radius-manual-values: ( ('btn' : 5px) );
32+
$border-radius-manual-values: (
33+
'button': 5px,
34+
'overlay': 6px,
35+
);
36+
37+
// .min-width
38+
39+
$min-width-manual-values: (
40+
'menu': 200px
41+
);

0 commit comments

Comments
 (0)