Skip to content

Commit 4e6066a

Browse files
MelSumnerMelSumner
authored
Merge pull request #530 from ember-learn/addon-tabs
Addon tabs component
2 parents 9cbebe8 + 1d7d048 commit 4e6066a

File tree

9 files changed

+167
-65
lines changed

9 files changed

+167
-65
lines changed

‎app/components/addon-tabs.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import Component from '@ember/component';
2+
3+
export default Component.extend({
4+
currentTab: 0,
5+
tagName: '',
6+
});

‎app/helpers/eq.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { helper } from '@ember/component/helper';
2+
3+
export function eq(params) {
4+
return params[0] === params[1];
5+
}
6+
7+
export default helper(eq);

‎app/styles/app.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@import "components/addon-tabs.css";
12
@import "components/brand-logos.css";
23
@import "components/ecosystem-icons.css";
34
@import "components/faqs.css";

‎app/styles/components/addon-tabs.css‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
.addon-tabs {
2+
background: linear-gradient(0deg, rgba(52,55,62,1) 0%, rgba(66,69,77,1) 100%);
3+
background: rgb(52,55,62);
4+
border-radius: 15px;
5+
box-shadow: 0px 5px 15px -10px rgba(0,0,0,0.75);
6+
width: 100%;
7+
}
8+
9+
.addon-tabs--header {
10+
display: flex;
11+
text-align: left;
12+
}
13+
14+
.addon-tabs--tab {
15+
background: none;
16+
border-color: #54565E;
17+
border-width: 1px;
18+
color: var(--color-gray-300);
19+
height: 50px;
20+
margin: 0;
21+
margin-left: -1px;
22+
padding: 0 10px;
23+
text-align: left;
24+
}
25+
26+
.addon-tabs--tab.active-tab {
27+
background-color: var(--color-button-bg);
28+
color: var(--color-button-text);
29+
}
30+
31+
.addon-tabs--tab:first-child {
32+
border-top-left-radius: 15px;
33+
margin-left: 0;
34+
}
35+
.addon-tabs--tab:last-child {
36+
border-top-right-radius: 15px;
37+
flex-grow: 1;
38+
}
39+
.addon-tabs--content {
40+
display: none;
41+
padding: 30px;
42+
text-align: left;
43+
}
44+
.addon-tabs--content.active-tab {
45+
display: block;
46+
}
47+
.addon-tabs--code {
48+
color: var(--color-gray-400);
49+
font-size: .8em;
50+
font-style: var(--font-family-mono);
51+
}

‎app/templates/components/addon-tabs.hbs‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<div class="addon-tabs">
2+
<div class="addon-tabs--header" role="tablist">
3+
<AddonTabs::Tab
4+
@currentTab={{this.currentTab}}
5+
@tabId={{0}}
6+
@onClick={{action (mut this.currentTab) 0}}
7+
>
8+
ember-cli-sass
9+
</AddonTabs::Tab>
10+
<AddonTabs::Tab
11+
@currentTab={{this.currentTab}}
12+
@tabId={{1}}
13+
@onClick={{action (mut this.currentTab) 1}}
14+
>
15+
SVG jar
16+
</AddonTabs::Tab>
17+
<AddonTabs::Tab
18+
@currentTab={{this.currentTab}}
19+
@tabId={{2}}
20+
@onClick={{action (mut this.currentTab) 2}}
21+
>
22+
Percy
23+
</AddonTabs::Tab>
24+
<AddonTabs::Tab
25+
@currentTab={{this.currentTab}}
26+
@tabId={{3}}
27+
@onClick={{action (mut this.currentTab) 3}}
28+
>
29+
ember-cli-deploy
30+
</AddonTabs::Tab>
31+
</div>
32+
33+
{{!-- template-lint-disable block-indentation --}}
34+
<AddonTabs::Panel
35+
@currentTab={{this.currentTab}}
36+
@tabId={{0}}
37+
>
38+
<p>Ember CLI Sass wires up your app with Sass, in a single command.</p>
39+
40+
<code class="addon-tabs--code">
41+
<pre class="mt-3">&gt; ember install ember-cli-sass
42+
43+
// app.scss
44+
body {
45+
@extend .font-serif;
46+
}</pre>
47+
</code>
48+
</AddonTabs::Panel>
49+
50+
<AddonTabs::Panel
51+
@currentTab={{this.currentTab}}
52+
@tabId={{1}}
53+
>
54+
<p>TODO one</p>
55+
56+
<code class="addon-tabs--code">
57+
<pre class="mt-3"></pre>
58+
</code>
59+
</AddonTabs::Panel>
60+
<AddonTabs::Panel
61+
@currentTab={{this.currentTab}}
62+
@tabId={{2}}
63+
>
64+
<p>TODO two</p>
65+
66+
<code class="addon-tabs--code">
67+
<pre class="mt-3"></pre>
68+
</code>
69+
</AddonTabs::Panel>
70+
<AddonTabs::Panel
71+
@currentTab={{this.currentTab}}
72+
@tabId={{3}}
73+
>
74+
<p>TODO three</p>
75+
76+
<code class="addon-tabs--code">
77+
<pre class="mt-3"></pre>
78+
</code>
79+
</AddonTabs::Panel>
80+
{{!-- template-lint-enable block-indentation --}}
81+
</div>

‎app/templates/components/addon-tabs/panel.hbs‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<div
2+
id="addon-panel-{{@tabId}}"
3+
role="tabpanel"
4+
tabindex="0"
5+
aria-labelledby="addon-tab-{{@tabId}}"
6+
class="addon-tabs--content {{if (eq @currentTab @tabId) "active-tab"}}"
7+
>
8+
{{yield}}
9+
</div>

‎app/templates/components/addon-tabs/tab.hbs‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<button
2+
class="addon-tabs--tab {{if (eq @currentTab @tabId) "active-tab"}}"
3+
role="tab"
4+
aria-selected={{if (eq @currentTab @tabId) "true"}}
5+
aria-controls="addon-panel-{{@tabId}}"
6+
id="addon-tab-{{@tabId}}"
7+
tabindex={{if (eq @currentTab @tabId) "0" "-1"}}
8+
onclick={{@onClick}}
9+
>
10+
{{yield}}
11+
</button>

‎app/templates/index.hbs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,7 @@
115115
</div>
116116

117117
<div class="lg:col-3 text-center">
118-
<img src="/images/addons.svg" alt="ember addons">
118+
<AddonTabs />
119119
</div>
120120

121121
<div class="lg:col-3">

‎public/images/addons.svg‎

Lines changed: 0 additions & 64 deletions
This file was deleted.

0 commit comments

Comments
 (0)