gatsby-matrix-theme 20.0.0 → 20.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/CHANGELOG.md +29 -0
  2. package/package.json +2 -2
  3. package/src/components/atoms/feedBackModule/feedback-module.module.scss +5 -6
  4. package/src/components/molecules/faq/faq.module.scss +66 -64
  5. package/src/components/molecules/faq/index.js +4 -7
  6. package/src/gatsby-core-theme/hooks/tabs/tab/tab-list.js +0 -4
  7. package/src/gatsby-core-theme/hooks/tabs/tab/tab-list.module.scss +2 -0
  8. package/src/gatsby-core-theme/hooks/tabs/tab/tab.module.scss +4 -1
  9. package/src/gatsby-core-theme/hooks/tabs/tabs.module.scss +1 -0
  10. package/src/gatsby-core-theme/styles/utils/variables/_main.scss +1 -1
  11. package/storybook/public/iframe.html +1 -1
  12. package/storybook/public/main.0fa2edfd.iframe.bundle.js +1 -0
  13. package/storybook/public/main.574da9bb.iframe.bundle.js +0 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,32 @@
1
+ ## [20.0.2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v20.0.1...v20.0.2) (2023-04-26)
2
+
3
+
4
+ ### Code Refactoring
5
+
6
+ * update components and style for v3 validator ([0ed1297](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/0ed1297ea4089be0c6e911d46a24deebc3e62ebe))
7
+ * update main style for w3c validator ([b6b847a](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/b6b847afac4e486f6e6a9f42b2bd825be696224f))
8
+ * update operator banner cta type for w3c validator ([d19de44](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/d19de4492922f258b0677f64df93c062b0c2fc10))
9
+
10
+
11
+ ### Config
12
+
13
+ * update core theme version ([5ad8bf5](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/5ad8bf51e6d5a4e2dfb3bab7f3a09acc4e116a29))
14
+
15
+
16
+ * Merge branch 'tm-3386-w3-validator-fixes' into 'master' ([5db4878](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/5db4878d3dc3b86be7af37ed4f0bd9d1109a7380))
17
+
18
+ ## [20.0.1](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v20.0.0...v20.0.1) (2023-04-24)
19
+
20
+
21
+ ### Bug Fixes
22
+
23
+ * remove isMobile ([befe963](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/befe963a221573c8ff859580109977955a5ab935))
24
+ * updated to latest core theme ([b0a3c81](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/b0a3c8149d009ebe63cffd3e959ac2e58e28af8a))
25
+
26
+
27
+ * Merge branch 'master' of git.ilcd.rocks:team-floyd/themes/matrix-theme ([48570f2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/48570f203ec0a8e0e3ced3a9fff62658d5977c0f))
28
+ * Merge branch 'tm-3350-tabs' into 'master' ([cf86cfb](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/cf86cfbc6a3379131ac4700e31e31abaccd138ee))
29
+
1
30
  # [20.0.0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v19.0.12...v20.0.0) (2023-04-20)
2
31
 
3
32
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "gatsby-matrix-theme",
3
- "version": "20.0.0",
3
+ "version": "20.0.2",
4
4
  "main": "index.js",
5
5
  "description": "Matrix Theme NPM Package",
6
6
  "author": "",
@@ -25,7 +25,7 @@
25
25
  "dependencies": {
26
26
  "@react-icons/all-files": "^4.1.0",
27
27
  "gatsby": "^4.20.0",
28
- "gatsby-core-theme": "20.0.13",
28
+ "gatsby-core-theme": "21.0.4",
29
29
  "gatsby-plugin-sharp": "^4.10.2",
30
30
  "gatsby-plugin-sitemap": "^3.3.0",
31
31
  "gatsby-transformer-sharp": "^4.10.0",
package/src/components/atoms/feedBackModule/feedback-module.module.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  .mainContainer {
2
2
  padding: 0 1.6rem;
3
3
  @include min(tablet) {
4
- padding: 0.2.4rem
4
+ padding: 0 2.4rem;
5
5
  }
6
6
  }
7
7
 
@@ -12,7 +12,7 @@
12
12
  max-width: var(--main-container-max) !important;
13
13
  margin-bottom: 1rem !important;
14
14
  margin: 0 auto;
15
- padding: 1.6rem 0 ;
15
+ padding: 1.6rem 0;
16
16
  }
17
17
  .container {
18
18
  @include flex-align(center, space-between);
@@ -76,9 +76,8 @@
76
76
  }
77
77
  }
78
78
 
79
-
80
- >:first-child:disabled,
81
- >:last-child:disabled {
79
+ > :first-child:disabled,
80
+ > :last-child:disabled {
82
81
  cursor: not-allowed;
83
82
  }
84
83
 
@@ -96,7 +95,7 @@
96
95
  box-shadow: var(--feedback-second-button-box-shadow-hover) !important;
97
96
  }
98
97
 
99
- >:first-child {
98
+ > :first-child {
100
99
  box-shadow: var(--feedbackModule-first-button-box-shadow);
101
100
  background: var(--feedback-first-button-background);
102
101
  }
package/src/components/molecules/faq/faq.module.scss CHANGED
@@ -1,71 +1,73 @@
1
1
  .faqContainer {
2
- padding: 0 1.6rem;
3
- @include min(tablet) {
4
- padding: 0 2.4rem;
5
- }
6
- .faqItem {
7
- display: flex;
8
- flex-direction: column;
9
- padding: 1rem 1.6rem 1.6rem;
10
- background-color: #fff;
11
- border-radius: 0.6rem;
12
- margin: 1rem 0;
2
+ padding: 0 1.6rem;
3
+ @include min(tablet) {
4
+ padding: 0 2.4rem;
5
+ }
6
+ .faqItem {
7
+ display: flex;
8
+ flex-direction: column;
9
+ padding: 1rem 1.6rem 1.6rem;
10
+ background-color: #fff;
11
+ border-radius: 0.6rem;
12
+ margin: 1rem 0;
13
13
 
14
- .title {
15
- position: relative;
16
- text-align: left;
17
- color: var(--color-12);
18
- font-size: 1.8rem;
19
- font-weight: 700;
20
- padding: 1rem 0;
21
- outline: none;
22
- padding-right: 2.5rem;
23
- .icon{
24
- display: flex;
25
- align-items: center;
26
- .circle{
27
- @include flex-align (center, center);
28
- margin-right: 0.5rem;
29
- }
30
- > span{
31
- display: block;
32
- margin: 0;
33
- margin-right: 2rem;
34
- font-weight: 700;
35
- font-size: 1.8rem;
36
- p, h2, h3, h4 {
37
- margin: 0;
38
- font-weight: 700;
39
- font-size: 1.8rem;
40
- }
41
- }
42
- }
43
- &:hover,
44
- &:focus {
45
- outline: none;
46
- }
14
+ .title {
15
+ position: relative;
16
+ text-align: left;
17
+ color: var(--color-12);
18
+ font-size: 1.8rem;
19
+ font-weight: 700;
20
+ padding: 1rem 0;
21
+ outline: none;
22
+ padding-right: 2.5rem;
23
+ display: flex;
24
+ align-items: center;
25
+ .circle {
26
+ @include flex-align(center, center);
27
+ margin-right: 0.5rem;
28
+ }
29
+ > span,
30
+ div {
31
+ display: block;
32
+ margin: 0;
33
+ margin-right: 2rem;
34
+ font-weight: 700;
35
+ font-size: 1.8rem;
36
+ p,
37
+ h2,
38
+ h3,
39
+ h4 {
40
+ margin: 0;
41
+ font-weight: 700;
42
+ font-size: 1.8rem;
43
+ }
44
+ }
45
+ &:hover,
46
+ &:focus {
47
+ outline: none;
48
+ }
47
49
 
48
- &:after {
49
- transition: 0.5s;
50
- @include arrow(black, 0.9rem, down, false, translateY(-50%));
51
- position: absolute;
52
- right: 0.5rem;
53
- top: 50%;
54
- }
50
+ &:after {
51
+ transition: 0.5s;
52
+ @include arrow(black, 0.9rem, down, false, translateY(-50%));
53
+ position: absolute;
54
+ right: 0.5rem;
55
+ top: 50%;
56
+ }
55
57
 
56
- &.invertArrow {
57
- &:after {
58
- transform: translateY(-50%) rotate(-135deg);
59
- }
60
- }
58
+ &.invertArrow {
59
+ &:after {
60
+ transform: translateY(-50%) rotate(-135deg);
61
61
  }
62
+ }
63
+ }
62
64
 
63
- .content {
64
- @include collapse(0.5s, 500rem);
65
- @include flex-direction(column);
66
- font-size: 1.6rem;
67
- color: var(--color-20);
68
- padding: 0;
69
- }
65
+ .content {
66
+ @include collapse(0.5s, 500rem);
67
+ @include flex-direction(column);
68
+ font-size: 1.6rem;
69
+ color: var(--color-20);
70
+ padding: 0;
70
71
  }
71
- }
72
+ }
73
+ }
package/src/components/molecules/faq/index.js CHANGED
@@ -60,17 +60,14 @@ const Faq = ({ module, closeAll = false, openItem, closeOthers = false, icon = '
60
60
  <div className={styles.faqContainer}>
61
61
  {items.map((item, index) => (
62
62
  <div key={keygen()} className={styles.faqItem}>
63
- <button
63
+ <div
64
64
  onClick={() => toggle(index)}
65
65
  className={`${styles.title} faq-gtm`}
66
- type="button"
67
66
  ref={(el) => (btnRefs.current[index] = el)}
68
67
  >
69
- <span className={styles.icon}>
70
- {icon && <span className={styles.circle}>{icon} </span>}
71
- <span dangerouslySetInnerHTML={{ __html: item.question }} />
72
- </span>
73
- </button>
68
+ {icon && <span className={styles.circle}>{icon} </span>}
69
+ <div dangerouslySetInnerHTML={{ __html: item.question }} />
70
+ </div>
74
71
  <div
75
72
  className={`${styles.content} ${styles.active}`}
76
73
  ref={(el) => (itemRefs.current[index] = el)}
package/src/gatsby-core-theme/hooks/tabs/tab/tab-list.js CHANGED
@@ -6,7 +6,6 @@ import PropTypes from 'prop-types';
6
6
  import Tab from 'gatsby-core-theme/src/hooks/tabs/tab/tab';
7
7
  import styles from './tab-list.module.scss';
8
8
  import keygen from '~helpers/keygen';
9
- import useWindowSize from '~hooks/useWindowSize';
10
9
  import { closeOtherSelects } from '~helpers/select';
11
10
 
12
11
  const TabList = ({
@@ -35,8 +34,6 @@ const TabList = ({
35
34
  filterBtn.current.classList.toggle(styles.flip);
36
35
  }
37
36
 
38
- const [width] = useWindowSize();
39
- const isMobile = width < 992;
40
37
  return (
41
38
  <div className={`${styles.tabList} ${alignRight && styles.right}`}>
42
39
  <button
@@ -52,7 +49,6 @@ const TabList = ({
52
49
  {tabItems.map((item, index) => {
53
50
  if (item === null) return null;
54
51
  const { label } = item.props;
55
- if (isMobile && label === activeTab.split('_')[0]) return null;
56
52
  return (
57
53
  <Tab
58
54
  activeTab={activeTab}
package/src/gatsby-core-theme/hooks/tabs/tab/tab-list.module.scss CHANGED
@@ -2,6 +2,7 @@
2
2
  @include flex-align(center, flex-start);
3
3
  position: relative;
4
4
  margin: 0 0 2rem 0;
5
+ height: fit-content;
5
6
  &.right {
6
7
  display: unset;
7
8
  @include min(tablet){
@@ -49,6 +50,7 @@
49
50
  .list {
50
51
  width: 100%;
51
52
  top: 100%;
53
+ margin-top: 0.5rem;
52
54
  @include max(tablet) {
53
55
  @include visibility;
54
56
  transition: visibility 0s linear 0s, opacity 0s linear;
package/src/gatsby-core-theme/hooks/tabs/tab/tab.module.scss CHANGED
@@ -11,7 +11,7 @@
11
11
 
12
12
  button {
13
13
  background: white;
14
- padding: 1.5rem 2rem;
14
+ padding: 1.5rem 1rem;
15
15
  text-transform: capitalize;
16
16
  font-weight: bold;
17
17
  color: #08202e;
@@ -27,6 +27,9 @@
27
27
  }
28
28
 
29
29
  .active {
30
+ @include max(tablet){
31
+ display: none;
32
+ }
30
33
  @include min(laptop) {
31
34
  background: #00889e;
32
35
  box-shadow: 0 0.2rem 0.4rem rgba(21, 14, 6, 0.15);
package/src/gatsby-core-theme/hooks/tabs/tabs.module.scss CHANGED
@@ -71,6 +71,7 @@
71
71
  font-weight: 700;
72
72
  text-align: left;
73
73
  font-size: 1.6rem;
74
+ white-space: nowrap;
74
75
  }
75
76
  }
76
77
 
package/src/gatsby-core-theme/styles/utils/variables/_main.scss CHANGED
@@ -174,7 +174,7 @@
174
174
  --feedbackModule-main-border-radius: 8px;
175
175
  --feedbackModule-background-color: white;
176
176
  --feedbackModule-container-radius: 8px;
177
- --feedbackModule-container-border: ;
177
+ --feedbackModule-container-border: 1.5px solid #EAEAEA;
178
178
  --feedbackModule-firstText-font-size: 20px;
179
179
  --feedbackModule-firstText-line-height: 20px;
180
180
  --feedbackModule-secondText-line-height: 26px;
package/storybook/public/iframe.html CHANGED
@@ -345,4 +345,4 @@
345
345
 
346
346
 
347
347
 
348
- window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/**/**/*.stories.js","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.js)$"},{"titlePrefix":"","directory":"./src","files":"**/**/**/**/*.stories.js","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.js)$"},{"titlePrefix":"","directory":"./src","files":"**/**/**/**/**/*.stories.js","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.js)$"}];</script><script src="runtime~main.411e0a84.iframe.bundle.js"></script><script src="627.5f6bcbc9.iframe.bundle.js"></script><script src="main.574da9bb.iframe.bundle.js"></script></body></html>
348
+ window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/**/**/*.stories.js","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.js)$"},{"titlePrefix":"","directory":"./src","files":"**/**/**/**/*.stories.js","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.js)$"},{"titlePrefix":"","directory":"./src","files":"**/**/**/**/**/*.stories.js","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.js)$"}];</script><script src="runtime~main.411e0a84.iframe.bundle.js"></script><script src="627.5f6bcbc9.iframe.bundle.js"></script><script src="main.0fa2edfd.iframe.bundle.js"></script></body></html>