imbric-theme 0.2.9 → 0.3.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (70) hide show
  1. package/atoms/Button/Button.stories.js +1 -1
  2. package/atoms/Button/__snapshots__/Button.stories.js.snap +8 -8
  3. package/atoms/Heading/Heading.stories.js +2 -2
  4. package/atoms/Heading/__snapshots__/Heading.stories.js.snap +16 -16
  5. package/atoms/Paragraph/Paragraph.stories.js +2 -2
  6. package/atoms/Paragraph/__snapshots__/Paragraph.stories.js.snap +16 -16
  7. package/atoms/Tab/Tab.js +41 -0
  8. package/atoms/Tab/Tab.module.css +17 -0
  9. package/atoms/Tab/Tab.stories.js +27 -0
  10. package/atoms/Tab/constants.js +1 -0
  11. package/atoms/Tab/index.js +3 -0
  12. package/index.js +5 -0
  13. package/layout/FlexColumnContent/FlexColumnContent.js +26 -0
  14. package/layout/FlexColumnContent/FlexColumnContent.module.css +5 -0
  15. package/layout/FlexColumnContent/FlexColumnContent.stories.js +28 -0
  16. package/layout/FlexColumnContent/constants.js +1 -0
  17. package/layout/FlexColumnContent/index.js +3 -0
  18. package/layout/Navbar/Navbar.js +55 -10
  19. package/layout/Navbar/Navbar.module.css +3 -2
  20. package/layout/Navbar/Navbar.stories.js +1 -4
  21. package/layout/Sidebar/Sidebar.js +17 -79
  22. package/layout/Sidebar/Sidebar.module.css +42 -6
  23. package/layout/Sidebar/Sidebar.stories.js +3 -2
  24. package/layout/Sidebar/constants.js +14 -26
  25. package/layout/Sidebar/index.js +1 -2
  26. package/molecules/ItemMenu/ItemMenu.js +2 -2
  27. package/molecules/ItemMenu/ItemMenu.module.css +1 -25
  28. package/molecules/Tabs/Tabs.js +53 -0
  29. package/molecules/Tabs/Tabs.module.css +12 -0
  30. package/molecules/Tabs/Tabs.stories.js +34 -0
  31. package/molecules/Tabs/constants.js +29 -0
  32. package/molecules/Tabs/index.js +3 -0
  33. package/package.json +4 -2
  34. package/layout/Sidebar/Sidebar.css +0 -90
  35. package/storybook-static/0.89e7d77f4d365594e982.manager.bundle.js +0 -1
  36. package/storybook-static/0.e189f835.iframe.bundle.js +0 -3
  37. package/storybook-static/0.e189f835.iframe.bundle.js.LICENSE.txt +0 -8
  38. package/storybook-static/0.e189f835.iframe.bundle.js.map +0 -1
  39. package/storybook-static/1.45d0d6aa.iframe.bundle.js +0 -3
  40. package/storybook-static/1.45d0d6aa.iframe.bundle.js.LICENSE.txt +0 -8
  41. package/storybook-static/1.45d0d6aa.iframe.bundle.js.map +0 -1
  42. package/storybook-static/2.75691da5.iframe.bundle.js +0 -1
  43. package/storybook-static/3.08d15cf4.iframe.bundle.js +0 -1
  44. package/storybook-static/4.cbd8fb943995f84e5583.manager.bundle.js +0 -2
  45. package/storybook-static/4.cbd8fb943995f84e5583.manager.bundle.js.LICENSE.txt +0 -8
  46. package/storybook-static/5.d02ab9a798461caeb506.manager.bundle.js +0 -1
  47. package/storybook-static/6.4deac86378225189a26c.manager.bundle.js +0 -2
  48. package/storybook-static/6.4deac86378225189a26c.manager.bundle.js.LICENSE.txt +0 -12
  49. package/storybook-static/7.20dbe97831bee4cf4ce4.manager.bundle.js +0 -1
  50. package/storybook-static/7.53d57a3d.iframe.bundle.js +0 -1
  51. package/storybook-static/8.33a6bfc3865ab87fcc57.manager.bundle.js +0 -1
  52. package/storybook-static/8.9b339902.iframe.bundle.js +0 -3
  53. package/storybook-static/8.9b339902.iframe.bundle.js.LICENSE.txt +0 -12
  54. package/storybook-static/8.9b339902.iframe.bundle.js.map +0 -1
  55. package/storybook-static/9.f9389e45.iframe.bundle.js +0 -1
  56. package/storybook-static/favicon.ico +0 -0
  57. package/storybook-static/iframe.html +0 -348
  58. package/storybook-static/index.html +0 -59
  59. package/storybook-static/main.45162e1b.iframe.bundle.js +0 -1
  60. package/storybook-static/main.e8773e46a6d316c46694.manager.bundle.js +0 -1
  61. package/storybook-static/runtime~main.9b3271f5.iframe.bundle.js +0 -1
  62. package/storybook-static/runtime~main.d0af9adf44459dbc718a.manager.bundle.js +0 -1
  63. package/storybook-static/static/logo.svg +0 -19
  64. package/storybook-static/static/logotipo.svg +0 -50
  65. package/storybook-static/static/logotipoS.svg +0 -26
  66. package/storybook-static/vendors~main.02332eca.iframe.bundle.js +0 -3
  67. package/storybook-static/vendors~main.02332eca.iframe.bundle.js.LICENSE.txt +0 -107
  68. package/storybook-static/vendors~main.02332eca.iframe.bundle.js.map +0 -1
  69. package/storybook-static/vendors~main.29dce51cb06d0354d6c9.manager.bundle.js +0 -2
  70. package/storybook-static/vendors~main.29dce51cb06d0354d6c9.manager.bundle.js.LICENSE.txt +0 -101
@@ -12,7 +12,7 @@ export default {
12
12
  title: 'Atoms/Button',
13
13
  component: Button,
14
14
  args: {
15
- children: 'You Shall Not Pass!',
15
+ children: 'Sed ut perspiciatis unde!',
16
16
  },
17
17
  argTypes: {
18
18
  type: getOptionsArgTypes(options.types),
@@ -22,7 +22,7 @@ exports[`Storyshots Atoms/Button Addon Append 1`] = `
22
22
  <h1
23
23
  className="heading color-inverted size-md weight-light is-centered is-inline"
24
24
  >
25
- You Shall Not Pass!
25
+ Sed ut perspiciatis unde!
26
26
  </h1>
27
27
  But ill-tempered Thengel.
28
28
  </button>
@@ -52,7 +52,7 @@ exports[`Storyshots Atoms/Button Addon Prepend 1`] = `
52
52
  <h1
53
53
  className="heading color-inverted size-md weight-light is-centered is-inline"
54
54
  >
55
- You Shall Not Pass!
55
+ Sed ut perspiciatis unde!
56
56
  </h1>
57
57
  </button>
58
58
  </div>
@@ -80,7 +80,7 @@ exports[`Storyshots Atoms/Button Default 1`] = `
80
80
  <h1
81
81
  className="heading color-inverted size-md weight-light is-centered"
82
82
  >
83
- You Shall Not Pass!
83
+ Sed ut perspiciatis unde!
84
84
  </h1>
85
85
  </button>
86
86
  </div>
@@ -108,7 +108,7 @@ exports[`Storyshots Atoms/Button Inline 1`] = `
108
108
  <h1
109
109
  className="heading color-inverted size-md weight-light is-centered"
110
110
  >
111
- You Shall Not Pass!
111
+ Sed ut perspiciatis unde!
112
112
  </h1>
113
113
  </button>
114
114
  </div>
@@ -136,7 +136,7 @@ exports[`Storyshots Atoms/Button Muted 1`] = `
136
136
  <h1
137
137
  className="heading color-inverted size-md weight-light is-centered"
138
138
  >
139
- You Shall Not Pass!
139
+ Sed ut perspiciatis unde!
140
140
  </h1>
141
141
  </button>
142
142
  </div>
@@ -164,7 +164,7 @@ exports[`Storyshots Atoms/Button Types 1`] = `
164
164
  <h1
165
165
  className="heading color-inverted size-md weight-light is-centered"
166
166
  >
167
- You Shall Not Pass!
167
+ Sed ut perspiciatis unde!
168
168
  </h1>
169
169
  </button>
170
170
  <button
@@ -174,7 +174,7 @@ exports[`Storyshots Atoms/Button Types 1`] = `
174
174
  <h1
175
175
  className="heading color-primary size-md weight-light is-centered"
176
176
  >
177
- You Shall Not Pass!
177
+ Sed ut perspiciatis unde!
178
178
  </h1>
179
179
  </button>
180
180
  <button
@@ -184,7 +184,7 @@ exports[`Storyshots Atoms/Button Types 1`] = `
184
184
  <h1
185
185
  className="heading color-primary size-md weight-light is-centered"
186
186
  >
187
- You Shall Not Pass!
187
+ Sed ut perspiciatis unde!
188
188
  </h1>
189
189
  </button>
190
190
  </div>
@@ -12,7 +12,7 @@ export default {
12
12
  title: 'Atoms/Heading',
13
13
  component: Heading,
14
14
  args: {
15
- children: 'Consent doubt Tuckborough challenge destroying.',
15
+ children: 'Lorem ipsum dolor sit amet, consectetur adipiscing.',
16
16
  },
17
17
  argTypes: {
18
18
  color: getOptionsArgTypes(options.colors),
@@ -33,7 +33,7 @@ export const Centered = Template.bind({})
33
33
  Centered.args = {
34
34
  isCentered: true,
35
35
  children:
36
- 'Lose consequence night studies Wolves should wizards destruction burglar? All right, then. Keep your secrets.',
36
+ 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.',
37
37
  }
38
38
 
39
39
  export const Colors = ListTemplate.bind({})
@@ -18,7 +18,7 @@ exports[`Storyshots Atoms/Heading Centered 1`] = `
18
18
  <h1
19
19
  className="heading color-base size-md weight-bold is-centered"
20
20
  >
21
- Lose consequence night studies Wolves should wizards destruction burglar? All right, then. Keep your secrets.
21
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
22
22
  </h1>
23
23
  </div>
24
24
  `;
@@ -41,22 +41,22 @@ exports[`Storyshots Atoms/Heading Colors 1`] = `
41
41
  <h1
42
42
  className="heading color-base size-md weight-bold"
43
43
  >
44
- Consent doubt Tuckborough challenge destroying.
44
+ Lorem ipsum dolor sit amet, consectetur adipiscing.
45
45
  </h1>
46
46
  <h1
47
47
  className="heading color-primary size-md weight-bold"
48
48
  >
49
- Consent doubt Tuckborough challenge destroying.
49
+ Lorem ipsum dolor sit amet, consectetur adipiscing.
50
50
  </h1>
51
51
  <h1
52
52
  className="heading color-tertiary size-md weight-bold"
53
53
  >
54
- Consent doubt Tuckborough challenge destroying.
54
+ Lorem ipsum dolor sit amet, consectetur adipiscing.
55
55
  </h1>
56
56
  <h1
57
57
  className="heading color-inverted size-md weight-bold"
58
58
  >
59
- Consent doubt Tuckborough challenge destroying.
59
+ Lorem ipsum dolor sit amet, consectetur adipiscing.
60
60
  </h1>
61
61
  </div>
62
62
  `;
@@ -79,7 +79,7 @@ exports[`Storyshots Atoms/Heading Default 1`] = `
79
79
  <h1
80
80
  className="heading color-base size-md weight-bold"
81
81
  >
82
- Consent doubt Tuckborough challenge destroying.
82
+ Lorem ipsum dolor sit amet, consectetur adipiscing.
83
83
  </h1>
84
84
  </div>
85
85
  `;
@@ -102,7 +102,7 @@ exports[`Storyshots Atoms/Heading Inline 1`] = `
102
102
  <h1
103
103
  className="heading color-base size-md weight-bold is-inline"
104
104
  >
105
- Consent doubt Tuckborough challenge destroying.
105
+ Lorem ipsum dolor sit amet, consectetur adipiscing.
106
106
  </h1>
107
107
  </div>
108
108
  `;
@@ -125,32 +125,32 @@ exports[`Storyshots Atoms/Heading Sizes 1`] = `
125
125
  <h1
126
126
  className="heading color-base size-xs weight-bold"
127
127
  >
128
- Consent doubt Tuckborough challenge destroying.
128
+ Lorem ipsum dolor sit amet, consectetur adipiscing.
129
129
  </h1>
130
130
  <h1
131
131
  className="heading color-base size-sm weight-bold"
132
132
  >
133
- Consent doubt Tuckborough challenge destroying.
133
+ Lorem ipsum dolor sit amet, consectetur adipiscing.
134
134
  </h1>
135
135
  <h1
136
136
  className="heading color-base size-md weight-bold"
137
137
  >
138
- Consent doubt Tuckborough challenge destroying.
138
+ Lorem ipsum dolor sit amet, consectetur adipiscing.
139
139
  </h1>
140
140
  <h1
141
141
  className="heading color-base size-lg weight-bold"
142
142
  >
143
- Consent doubt Tuckborough challenge destroying.
143
+ Lorem ipsum dolor sit amet, consectetur adipiscing.
144
144
  </h1>
145
145
  <h1
146
146
  className="heading color-base size-xl weight-bold"
147
147
  >
148
- Consent doubt Tuckborough challenge destroying.
148
+ Lorem ipsum dolor sit amet, consectetur adipiscing.
149
149
  </h1>
150
150
  <h1
151
151
  className="heading color-base size-2xl weight-bold"
152
152
  >
153
- Consent doubt Tuckborough challenge destroying.
153
+ Lorem ipsum dolor sit amet, consectetur adipiscing.
154
154
  </h1>
155
155
  </div>
156
156
  `;
@@ -173,17 +173,17 @@ exports[`Storyshots Atoms/Heading Weights 1`] = `
173
173
  <h1
174
174
  className="heading color-base size-md weight-light"
175
175
  >
176
- Consent doubt Tuckborough challenge destroying.
176
+ Lorem ipsum dolor sit amet, consectetur adipiscing.
177
177
  </h1>
178
178
  <h1
179
179
  className="heading color-base size-md weight-normal"
180
180
  >
181
- Consent doubt Tuckborough challenge destroying.
181
+ Lorem ipsum dolor sit amet, consectetur adipiscing.
182
182
  </h1>
183
183
  <h1
184
184
  className="heading color-base size-md weight-bold"
185
185
  >
186
- Consent doubt Tuckborough challenge destroying.
186
+ Lorem ipsum dolor sit amet, consectetur adipiscing.
187
187
  </h1>
188
188
  </div>
189
189
  `;
@@ -14,7 +14,7 @@ export default {
14
14
  component: Paragraph,
15
15
  args: {
16
16
  children:
17
- 'Swords are no more use here. Esquire days mountain Fangorn champion brace waiting laboring preparing! Canopy plunder deceit cakehole strange Udùn piled fighters potent?',
17
+ 'But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.',
18
18
  },
19
19
  argTypes: {
20
20
  color: getOptionsArgTypes(options.colors),
@@ -36,7 +36,7 @@ export const Centered = Template.bind({})
36
36
  Centered.args = {
37
37
  isCentered: true,
38
38
  children:
39
- 'Lose consequence night studies Wolves should wizards destruction burglar? All right, then. Keep your secrets.',
39
+ 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.',
40
40
  }
41
41
 
42
42
  export const Monospace = Template.bind({})
@@ -18,7 +18,7 @@ exports[`Storyshots Atoms/Paragraph Centered 1`] = `
18
18
  <p
19
19
  className="paragraph color-base size-md weight-normal is-centered"
20
20
  >
21
- Lose consequence night studies Wolves should wizards destruction burglar? All right, then. Keep your secrets.
21
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
22
22
  </p>
23
23
  </div>
24
24
  `;
@@ -41,27 +41,27 @@ exports[`Storyshots Atoms/Paragraph Colors 1`] = `
41
41
  <p
42
42
  className="paragraph color-base size-md weight-normal"
43
43
  >
44
- Swords are no more use here. Esquire days mountain Fangorn champion brace waiting laboring preparing! Canopy plunder deceit cakehole strange Udùn piled fighters potent?
44
+ But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
45
45
  </p>
46
46
  <p
47
47
  className="paragraph color-muted size-md weight-normal"
48
48
  >
49
- Swords are no more use here. Esquire days mountain Fangorn champion brace waiting laboring preparing! Canopy plunder deceit cakehole strange Udùn piled fighters potent?
49
+ But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
50
50
  </p>
51
51
  <p
52
52
  className="paragraph color-inverted size-md weight-normal"
53
53
  >
54
- Swords are no more use here. Esquire days mountain Fangorn champion brace waiting laboring preparing! Canopy plunder deceit cakehole strange Udùn piled fighters potent?
54
+ But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
55
55
  </p>
56
56
  <p
57
57
  className="paragraph color-primary size-md weight-normal"
58
58
  >
59
- Swords are no more use here. Esquire days mountain Fangorn champion brace waiting laboring preparing! Canopy plunder deceit cakehole strange Udùn piled fighters potent?
59
+ But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
60
60
  </p>
61
61
  <p
62
62
  className="paragraph color-tertiary size-md weight-normal"
63
63
  >
64
- Swords are no more use here. Esquire days mountain Fangorn champion brace waiting laboring preparing! Canopy plunder deceit cakehole strange Udùn piled fighters potent?
64
+ But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
65
65
  </p>
66
66
  </div>
67
67
  `;
@@ -84,7 +84,7 @@ exports[`Storyshots Atoms/Paragraph Default 1`] = `
84
84
  <p
85
85
  className="paragraph color-base size-md weight-normal"
86
86
  >
87
- Swords are no more use here. Esquire days mountain Fangorn champion brace waiting laboring preparing! Canopy plunder deceit cakehole strange Udùn piled fighters potent?
87
+ But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
88
88
  </p>
89
89
  </div>
90
90
  `;
@@ -130,7 +130,7 @@ exports[`Storyshots Atoms/Paragraph Monospace 1`] = `
130
130
  <p
131
131
  className="paragraph color-base size-md weight-normal is-monospace"
132
132
  >
133
- Swords are no more use here. Esquire days mountain Fangorn champion brace waiting laboring preparing! Canopy plunder deceit cakehole strange Udùn piled fighters potent?
133
+ But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
134
134
  </p>
135
135
  </div>
136
136
  `;
@@ -153,22 +153,22 @@ exports[`Storyshots Atoms/Paragraph Sizes 1`] = `
153
153
  <p
154
154
  className="paragraph color-base size-xs weight-normal"
155
155
  >
156
- Swords are no more use here. Esquire days mountain Fangorn champion brace waiting laboring preparing! Canopy plunder deceit cakehole strange Udùn piled fighters potent?
156
+ But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
157
157
  </p>
158
158
  <p
159
159
  className="paragraph color-base size-sm weight-normal"
160
160
  >
161
- Swords are no more use here. Esquire days mountain Fangorn champion brace waiting laboring preparing! Canopy plunder deceit cakehole strange Udùn piled fighters potent?
161
+ But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
162
162
  </p>
163
163
  <p
164
164
  className="paragraph color-base size-md weight-normal"
165
165
  >
166
- Swords are no more use here. Esquire days mountain Fangorn champion brace waiting laboring preparing! Canopy plunder deceit cakehole strange Udùn piled fighters potent?
166
+ But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
167
167
  </p>
168
168
  <p
169
169
  className="paragraph color-base size-lg weight-normal"
170
170
  >
171
- Swords are no more use here. Esquire days mountain Fangorn champion brace waiting laboring preparing! Canopy plunder deceit cakehole strange Udùn piled fighters potent?
171
+ But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
172
172
  </p>
173
173
  </div>
174
174
  `;
@@ -191,7 +191,7 @@ exports[`Storyshots Atoms/Paragraph Striked 1`] = `
191
191
  <p
192
192
  className="paragraph color-base size-md weight-normal is-striked"
193
193
  >
194
- Swords are no more use here. Esquire days mountain Fangorn champion brace waiting laboring preparing! Canopy plunder deceit cakehole strange Udùn piled fighters potent?
194
+ But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
195
195
  </p>
196
196
  </div>
197
197
  `;
@@ -214,17 +214,17 @@ exports[`Storyshots Atoms/Paragraph Weights 1`] = `
214
214
  <p
215
215
  className="paragraph color-base size-md weight-normal"
216
216
  >
217
- Swords are no more use here. Esquire days mountain Fangorn champion brace waiting laboring preparing! Canopy plunder deceit cakehole strange Udùn piled fighters potent?
217
+ But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
218
218
  </p>
219
219
  <p
220
220
  className="paragraph color-base size-md weight-medium"
221
221
  >
222
- Swords are no more use here. Esquire days mountain Fangorn champion brace waiting laboring preparing! Canopy plunder deceit cakehole strange Udùn piled fighters potent?
222
+ But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
223
223
  </p>
224
224
  <p
225
225
  className="paragraph color-base size-md weight-semibold"
226
226
  >
227
- Swords are no more use here. Esquire days mountain Fangorn champion brace waiting laboring preparing! Canopy plunder deceit cakehole strange Udùn piled fighters potent?
227
+ But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
228
228
  </p>
229
229
  </div>
230
230
  `;
@@ -0,0 +1,41 @@
1
+ import React from 'react'
2
+ import PropTypes from 'prop-types'
3
+
4
+ import styles from './Tab.module.css'
5
+ import { options } from './constants'
6
+ import withStyles from '../../hocs/withStyles'
7
+
8
+ export const handleClick = ({ onClick }) => (event) => {
9
+ onClick(event)
10
+ }
11
+
12
+ export const Tab = ({ getStyles, children, activeTab, viewTab, onClick }) => {
13
+
14
+ if (viewTab) {
15
+ return (
16
+ <>
17
+ <li className={getStyles('tab', { 'active': activeTab })} onClick={onClick && handleClick({ onClick })}>
18
+ {children}
19
+ </li>
20
+ </>
21
+ )
22
+
23
+ } else {
24
+ null
25
+ }
26
+ }
27
+
28
+ Tab.propTypes = {
29
+ getStyles: PropTypes.func.isRequired,
30
+ children: PropTypes.node.isRequired,
31
+ activeTab: PropTypes.bool.isRequired,
32
+ viewTab: PropTypes.bool.isRequired,
33
+ onClick: PropTypes.func.isRequired,
34
+ }
35
+
36
+ Tab.defaultProps = {
37
+ getStyles: () => { },
38
+ onClick: () => { },
39
+ }
40
+
41
+ export default withStyles(styles)(Tab)
@@ -0,0 +1,17 @@
1
+ .tab {
2
+ display: flex;
3
+ font-size: var(--font-size-base);
4
+ cursor: pointer;
5
+ color: var(--color-font-highlight);
6
+ padding: 1.1em 1.5em;
7
+ }
8
+
9
+ .tab:hover {
10
+ color: var(--color-primary);
11
+ border-bottom: 2px solid var(--color-primary);
12
+ }
13
+
14
+ .tab.active {
15
+ color: var(--color-primary);
16
+ border-bottom: 2px solid var(--color-primary);
17
+ }
@@ -0,0 +1,27 @@
1
+ import { Tab, styles, options } from '.'
2
+
3
+ import {
4
+ getTemplate,
5
+ getListTemplate,
6
+ getOptionsArgTypes,
7
+ } from '../../helpers/storybook'
8
+
9
+ const Template = getTemplate(Tab, styles)
10
+ const ListTemplate = getListTemplate(Tab, styles)
11
+
12
+ export default {
13
+ title: 'Atoms/Tab',
14
+ component: Tab,
15
+ args: {
16
+ children: 'Taksee',
17
+ activeTab: false,
18
+ viewTab: true,
19
+ },
20
+ argTypes: {
21
+ // types: getOptionsArgTypes(options.types),
22
+ },
23
+ }
24
+
25
+ export const Default = Template.bind({})
26
+ // export const List = ListTemplate.bind({})
27
+ // List.args = { items: options.types.map((type) => ({ type })) }
@@ -0,0 +1 @@
1
+ export const options = { types: [] }
@@ -0,0 +1,3 @@
1
+ export { default, Tab } from './Tab'
2
+ export { options } from './constants'
3
+ export { default as styles } from './Tab.module.css'
package/index.js CHANGED
@@ -2,7 +2,10 @@
2
2
  export { default as CenteredContent } from './layout/CenteredContent'
3
3
  export { default as Container } from './layout/Container'
4
4
  export { default as FullHeightContent } from './layout/FullHeightContent'
5
+ export { default as FlexColumnContent } from './layout/FlexColumnContent'
5
6
  export { default as Spacer } from './layout/Spacer'
7
+ export { default as Sidebar } from './layout/Sidebar'
8
+ export { default as Navbar } from './layout/Navbar'
6
9
 
7
10
  // Atoms
8
11
  export { default as Avatar } from './atoms/Avatar'
@@ -18,6 +21,7 @@ export { default as Modal } from './atoms/Modal'
18
21
  export { default as Paragraph } from './atoms/Paragraph'
19
22
  export { default as Picture } from './atoms/Picture'
20
23
  export { default as Textarea } from './atoms/Textarea'
24
+ export { default as Tab } from './atoms/Tab'
21
25
 
22
26
  // Molecules
23
27
  export { default as Accordion } from './molecules/Accordion'
@@ -29,3 +33,4 @@ export { default as Score } from './molecules/Score'
29
33
  export { default as Task } from './molecules/Task'
30
34
  export { default as TaskCounter } from './molecules/TaskCounter'
31
35
  export { default as IconLabel } from './molecules/IconLabel'
36
+ export { default as ItemMenu } from './molecules/ItemMenu'
@@ -0,0 +1,26 @@
1
+ import React from 'react'
2
+ import PropTypes from 'prop-types'
3
+
4
+ import styles from './FlexColumnContent.module.css'
5
+ import { options } from './constants'
6
+ import withStyles from '../../hocs/withStyles'
7
+
8
+ export const FlexColumnContent = ({ children, getStyles }) => {
9
+ return (
10
+ <div className={getStyles('flex-column-content')}>
11
+ {children}
12
+ </div>
13
+ )
14
+ }
15
+
16
+ FlexColumnContent.propTypes = {
17
+ children: PropTypes.node.isRequired,
18
+ getStyles: PropTypes.func.isRequired,
19
+ types: PropTypes.oneOf(options.types),
20
+ }
21
+
22
+ FlexColumnContent.defaultProps = {
23
+ getStyles: () => {},
24
+ }
25
+
26
+ export default withStyles(styles)(FlexColumnContent)
@@ -0,0 +1,5 @@
1
+ .flex-column-content {
2
+ display: flex;
3
+ flex: 1 1 auto;
4
+ width: 100%;
5
+ }
@@ -0,0 +1,28 @@
1
+ import { FlexColumnContent, styles, options } from '.'
2
+
3
+ import {
4
+ getTemplate,
5
+ getListTemplate,
6
+ getOptionsArgTypes,
7
+ } from '../../helpers/storybook'
8
+
9
+ const Template = getTemplate(FlexColumnContent, styles)
10
+ const ListTemplate = getListTemplate(FlexColumnContent, styles)
11
+
12
+ export default {
13
+ title: 'Layout/FlexColumnContent',
14
+ component: FlexColumnContent,
15
+ args: {
16
+ children: `Farthings pulled strain? Half they'll greater land sordid Elessar. Glamdring um 17 13 motion? Creaked fate spawning chief lords loved loveliest ashes Elfs witness. Brook born Caradhras dining raining! Seeing-stones taking unlost working. A wizard is never late, Frodo Baggins. Nor is he early. He arrives precisely when he means to. Oakenshield despite distinct prosperous wields relight dark weighed leader reaches rid honor. Moments poison Sackville-Bagginses echoes dozens fend get. Scales exist apple Gundabad retaken bunch agreeable mantle cannot name's seasoning private.
17
+ Brave dry defeats? Remembered unleashed Denethor niceties legacy. Streets cares pretty Brandybucks ostler. Intact dispatch their expenses suffered flaming bacon should Fili? Jacksie begins hallway needed tracked Gondor's wonderful popularity. Seemed ears perfectly Oakenshield's pale fall animals stabs betrayed grumbling? Stuff awake Brandybuck large done. Curse you and all the halflings!
18
+ Dared sit torment goes Anárion forgiven west. Summon Bucklebury ship. Terms none Farthings. Tea choose Dwarvish! Leagues gracious carpet payment Brandywine senses very thousand! Don't you leave him, Samwise Gamgee. Firestorm raising Shire reaction mud morninged shines death should! It'll Halflings nab pot drove start. Carpet Lasgalen seen sleepies!
19
+ Seeing renown knocked battered contend World shepherd. Roof sautéed kingdom agree curtain lived preparing down material Galion appearance! Faramir one-fourteenth study talked amongst fisherman barren recoil responsible. There is one Dwarf yet in Moria who still draws breath. Boats wait exaggerate guessed Muil usurper suffice. Unspoken swears stands serpent depart Mithril. Ugly threat Dwarf possessions yours homage long-term unmade. Well-earned suffice tapestry tongue piled smoke lacerations talisman helps Dragon-Slayer crown? Blanket shan't dare appearances hours grave Muil.`,
20
+ },
21
+ argTypes: {
22
+ types: getOptionsArgTypes(options.types),
23
+ },
24
+ }
25
+
26
+ export const Default = Template.bind({})
27
+ // export const List = ListTemplate.bind({})
28
+ // List.args = { items: options.types.map((type) => ({ type })) }
@@ -0,0 +1 @@
1
+ export const options = { types: ['row', 'column', ] }
@@ -0,0 +1,3 @@
1
+ export { default, FlexColumnContent } from './FlexColumnContent'
2
+ export { options } from './constants'
3
+ export { default as styles } from './FlexColumnContent.module.css'
@@ -3,32 +3,77 @@ import PropTypes from 'prop-types'
3
3
  import styles from './Navbar.module.css'
4
4
  import withStyles from '../../hocs/withStyles'
5
5
 
6
- export const Navbar = ({ getStyles, children, isPlayground }) => {
6
+ import Heading from '../../atoms/Heading/Heading'
7
+ import Tabs from '../../molecules/Tabs/Tabs'
8
+
9
+ export const Navbar = ({ getStyles, isPlayground, children }) => {
7
10
  return (
8
11
  <>
9
- <header className={getStyles('navbar', {
12
+ <header className={getStyles('navbar', {
10
13
  'is-playground': isPlayground,
11
14
  })}>
12
- <div className={getStyles('navbar__title', 'navbar__item')}>Cutco</div>
13
- <div className={getStyles('navbar__item')}>About Us</div>
14
- <div className={getStyles('navbar__item')}>Contact</div>
15
- <div className={getStyles('navbar__item')}>Help</div>
16
- </header>
17
15
 
18
- {/* {children} */}
16
+ <Heading
17
+ color="primary"
18
+ size="sm"
19
+ weight="light"
20
+ isInline
21
+ >
22
+ {children}
23
+ </Heading>
24
+
25
+ <Tabs
26
+ options={[
27
+ {
28
+ href: '/taxi',
29
+ text: 'Taxi',
30
+ view: true
31
+ },
32
+ {
33
+ href: '/parking',
34
+ text: 'Parking',
35
+ view: true
36
+ },
37
+ {
38
+ href: '/sharing',
39
+ text: 'Sharing',
40
+ view: true
41
+ },
42
+ {
43
+ href: '/sharing',
44
+ text: 'T. Publico',
45
+ view: true
46
+ },
47
+ {
48
+ href: '/sharing',
49
+ text: 'Hoja de Km',
50
+ view: true
51
+ }
52
+ ]}
53
+ viewTabs
54
+ />
55
+
56
+
57
+ {/* <div className={getStyles('navbar__title', 'navbar__item')}>Taksee</div> */}
58
+ {/* <div className={getStyles('navbar__item')}>Legal</div>
59
+ <div className={getStyles('navbar__item')}>User Guide</div> */}
60
+ <div className={getStyles('navbar__item')}>Logout</div>
61
+ </header>
62
+
63
+
19
64
  </>
20
65
  )
21
66
  }
22
67
 
23
68
  Navbar.propTypes = {
24
- children: PropTypes.node.isRequired,
25
69
  getStyles: PropTypes.func.isRequired,
70
+ children: PropTypes.string.isRequired,
26
71
  isPlayground: PropTypes.bool,
27
72
  }
28
73
 
29
74
  Navbar.defaultProps = {
30
75
  isPlayground: false,
31
- getStyles: () => {},
76
+ getStyles: () => { },
32
77
  }
33
78
 
34
79
  export default withStyles(styles)(Navbar)