@times-components/ts-components 1.54.1 → 1.54.3

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 (29) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/components/newsletter-puff/AutoNewsletterPuff.d.ts +1 -1
  3. package/dist/components/newsletter-puff/InlineNewsletterPuff.d.ts +1 -1
  4. package/dist/components/newsletter-puff/InlineNewsletterPuff.js +3 -3
  5. package/dist/components/newsletter-puff/__tests__/AutoNewsletterPuff.test.js +3 -2
  6. package/dist/components/newsletter-puff/newsletter-puff-button/NewsletterPuffButton.js +3 -4
  7. package/dist/components/newsletter-puff/newsletter-puff-button/styles.d.ts +2 -15
  8. package/dist/components/newsletter-puff/newsletter-puff-button/styles.js +29 -16
  9. package/dist/components/newsletter-puff/newsletter-puff-link/NewsletterPuffLink.js +4 -2
  10. package/dist/components/newsletter-puff/styles.js +5 -1
  11. package/package.json +13 -13
  12. package/rnw.js +1 -1
  13. package/src/components/newsletter-puff/AutoNewsletterPuff.tsx +1 -1
  14. package/src/components/newsletter-puff/InlineNewsletterPuff.tsx +3 -3
  15. package/src/components/newsletter-puff/__tests__/AutoNewsletterPuff.test.tsx +2 -1
  16. package/src/components/newsletter-puff/__tests__/__snapshots__/AutoNewsletterPuff.test.tsx.snap +4 -4
  17. package/src/components/newsletter-puff/__tests__/__snapshots__/InlineNewsletterPuff.test.tsx.snap +30 -33
  18. package/src/components/newsletter-puff/newsletter-puff-button/NewsletterPuffButton.tsx +5 -9
  19. package/src/components/newsletter-puff/newsletter-puff-button/styles.ts +28 -15
  20. package/src/components/newsletter-puff/newsletter-puff-link/NewsletterPuffLink.tsx +6 -3
  21. package/src/components/newsletter-puff/preview-newsletter-puff/__tests__/__snapshots__/PreviewNewsletterPuff.test.tsx.snap +2 -3
  22. package/src/components/newsletter-puff/styles.ts +4 -0
  23. package/src/types/externs.d.ts +5 -0
  24. package/dist/helpers/text-formatting/CapitaliseFirstCharacter.d.ts +0 -1
  25. package/dist/helpers/text-formatting/CapitaliseFirstCharacter.js +0 -9
  26. package/dist/helpers/text-formatting/__tests__/CapitaliseFirstCharacter.test.d.ts +0 -1
  27. package/dist/helpers/text-formatting/__tests__/CapitaliseFirstCharacter.test.js +0 -12
  28. package/src/helpers/text-formatting/CapitaliseFirstCharacter.ts +0 -9
  29. package/src/helpers/text-formatting/__tests__/CapitaliseFirstCharacter.test.tsx +0 -13
@@ -25,5 +25,5 @@ type AutoNewsletterPuffProps = {
25
25
  code: string;
26
26
  copy: string;
27
27
  headline: string;
28
- section?: string;
28
+ section: string;
29
29
  };
@@ -4,18 +4,18 @@ import { Mutation } from 'react-apollo';
4
4
  import { GetNewsletter } from '@times-components/provider';
5
5
  import { subscribeNewsletter as subscribeNewsletterMutation } from '@times-components/provider-queries';
6
6
  import { Placeholder } from '@times-components/image';
7
+ import { capitalise } from '@times-components/utils';
7
8
 
8
9
  import { Newsletter } from './newsletter/Newsletter';
9
10
 
10
11
  import { TrackingContextProvider } from '../../helpers/tracking/TrackingContextProvider';
11
- import { capitaliseFirstCharacter } from '../../helpers/text-formatting/CapitaliseFirstCharacter';
12
12
 
13
13
  import { InpContainer } from './styles';
14
14
 
15
15
  type InlineNewsletterPuffProps = {
16
16
  copy: string;
17
17
  headline: string;
18
- section?: string;
18
+ section: string;
19
19
  code: string;
20
20
  };
21
21
 
@@ -78,7 +78,7 @@ export const InlineNewsletterPuff = ({
78
78
  {({ intersectObserverRef }) => (
79
79
  <Newsletter
80
80
  intersectObserverRef={intersectObserverRef}
81
- section={capitaliseFirstCharacter(section)}
81
+ section={capitalise(section)}
82
82
  justSubscribed={justSubscribed}
83
83
  headline={headline}
84
84
  updatingSubscription={updatingSubscription}
@@ -13,7 +13,8 @@ import {
13
13
  const defaultProps = {
14
14
  code: '123',
15
15
  copy: 'abc',
16
- headline: 'headline'
16
+ headline: 'headline',
17
+ section: 'sport'
17
18
  };
18
19
 
19
20
  const mocks = [
@@ -6,7 +6,7 @@ exports[`<AutoNewsletterPuff> display function always renders 1`] = `
6
6
  style="display: block;"
7
7
  >
8
8
  <div
9
- class="sc-bwzfXH sc-bxivhb isparC"
9
+ class="sc-htpNat sc-ifAKCX kVAWuv"
10
10
  style="height: 257px;"
11
11
  >
12
12
  <div
@@ -45,7 +45,7 @@ exports[`<AutoNewsletterPuff> display function doesnt render without consent 1`]
45
45
  style="display: none;"
46
46
  >
47
47
  <div
48
- class="sc-bwzfXH sc-bxivhb isparC"
48
+ class="sc-htpNat sc-ifAKCX kVAWuv"
49
49
  style="height: 257px;"
50
50
  >
51
51
  <div
@@ -84,7 +84,7 @@ exports[`<AutoNewsletterPuff> using a display function [1, 3] count = 1 1`] = `
84
84
  style="display: block;"
85
85
  >
86
86
  <div
87
- class="sc-bwzfXH sc-bxivhb isparC"
87
+ class="sc-htpNat sc-ifAKCX kVAWuv"
88
88
  style="height: 257px;"
89
89
  >
90
90
  <div
@@ -123,7 +123,7 @@ exports[`<AutoNewsletterPuff> using a display function [1, 3] count = 2 1`] = `
123
123
  style="display: none;"
124
124
  >
125
125
  <div
126
- class="sc-bwzfXH sc-bxivhb isparC"
126
+ class="sc-htpNat sc-ifAKCX kVAWuv"
127
127
  style="height: 257px;"
128
128
  >
129
129
  <div
@@ -4,54 +4,53 @@ exports[`Inline Newsletter Puff renders loading state state 1`] = `
4
4
  <body>
5
5
  <div>
6
6
  <div
7
- class="sc-bwzfXH sc-bxivhb gBLWdB"
7
+ class="sc-htpNat sc-ifAKCX iWYiTB"
8
8
  >
9
9
  <div
10
- class="sc-bwzfXH sc-EHOje jfKrZk"
10
+ class="sc-htpNat sc-bZQynM fcQclH"
11
11
  >
12
12
  <div
13
- class="sc-bwzfXH sc-gzVnrw dolbke"
13
+ class="sc-htpNat sc-htoDjs bnLiNW"
14
14
  >
15
15
  <div
16
- class="sc-bZQynM gfhMRw"
16
+ class="sc-gzVnrw TDlzj"
17
17
  />
18
18
  <div
19
- class="sc-bZQynM gfhMRw"
19
+ class="sc-gzVnrw TDlzj"
20
20
  />
21
21
  <div
22
- class="sc-bZQynM gfhMRw"
22
+ class="sc-gzVnrw TDlzj"
23
23
  />
24
24
  </div>
25
25
  </div>
26
26
  <div
27
- class="sc-bwzfXH sc-dnqmqq dLVcgB"
27
+ class="sc-htpNat sc-iwsKbI cuimXU"
28
28
  >
29
29
  <div
30
- class="sc-htpNat sc-gZMcBi kiYplO"
30
+ class="sc-bxivhb sc-gqjmRU imXojB"
31
31
  >
32
32
  <div
33
- class="sc-htpNat sc-iwsKbI eLieBX"
33
+ class="sc-bxivhb sc-gZMcBi kRYdQT"
34
34
  >
35
35
  Politics. Explained.
36
36
  :
37
37
  </div>
38
38
  Sign up to receive our brilliant Red Box newsletter, Matt Chorley\`s poke at politics delivered every weekday morning at 8am.
39
39
  <div
40
- class="sc-bwzfXH sc-gqjmRU hGzDOp"
40
+ class="sc-htpNat sc-VigVT cSaWjg"
41
41
  >
42
42
  <button
43
- class="sc-bdVaJa bXCphr"
43
+ class="sc-bwzfXH gHDjoa"
44
44
  >
45
45
  One click sign up
46
46
  </button>
47
47
  </div>
48
48
  </div>
49
49
  <div
50
- class="sc-bwzfXH sc-gqjmRU hhmUDh"
50
+ class="sc-htpNat sc-VigVT iWOUWL"
51
51
  >
52
52
  <button
53
- style="font-family: GillSansMTStd-Medium; font-size: 16px; line-height: 0; align-items: center; background-color: transparent; border-radius: 2px; color: rgb(29, 29, 27); cursor: pointer; height: 48px; justify-content: center; min-width: 100px; padding-top: 4px; width: 100%; border-color: #1d1d1b; border-width: 1px; elevation: 0; letter-spacing: 0.2px;"
54
- type="button"
53
+ class="sc-bdVaJa fhHIYP"
55
54
  >
56
55
  One click sign up
57
56
  </button>
@@ -72,7 +71,7 @@ exports[`Inline Newsletter Puff renders placeholder when loading 1`] = `
72
71
  <body>
73
72
  <div>
74
73
  <div
75
- class="sc-bwzfXH sc-bxivhb isparC"
74
+ class="sc-htpNat sc-ifAKCX kVAWuv"
76
75
  style="height: 257px;"
77
76
  >
78
77
  <div
@@ -110,37 +109,36 @@ exports[`Inline Newsletter Puff renders signup state 1`] = `
110
109
  <body>
111
110
  <div>
112
111
  <div
113
- class="sc-bwzfXH sc-bxivhb gBLWdB"
112
+ class="sc-htpNat sc-ifAKCX iWYiTB"
114
113
  >
115
114
  <div
116
- class="sc-bwzfXH sc-dnqmqq dLVcgB"
115
+ class="sc-htpNat sc-iwsKbI cuimXU"
117
116
  >
118
117
  <div
119
- class="sc-htpNat sc-gZMcBi kiYplO"
118
+ class="sc-bxivhb sc-gqjmRU imXojB"
120
119
  >
121
120
  <div
122
- class="sc-htpNat sc-iwsKbI eLieBX"
121
+ class="sc-bxivhb sc-gZMcBi kRYdQT"
123
122
  >
124
123
  Politics. Explained.
125
124
  :
126
125
  </div>
127
126
  Sign up to receive our brilliant Red Box newsletter, Matt Chorley\`s poke at politics delivered every weekday morning at 8am.
128
127
  <div
129
- class="sc-bwzfXH sc-gqjmRU hGzDOp"
128
+ class="sc-htpNat sc-VigVT cSaWjg"
130
129
  >
131
130
  <button
132
- class="sc-bdVaJa bXCphr"
131
+ class="sc-bwzfXH gHDjoa"
133
132
  >
134
133
  One click sign up
135
134
  </button>
136
135
  </div>
137
136
  </div>
138
137
  <div
139
- class="sc-bwzfXH sc-gqjmRU hhmUDh"
138
+ class="sc-htpNat sc-VigVT iWOUWL"
140
139
  >
141
140
  <button
142
- style="font-family: GillSansMTStd-Medium; font-size: 16px; line-height: 0; align-items: center; background-color: transparent; border-radius: 2px; color: rgb(29, 29, 27); cursor: pointer; height: 48px; justify-content: center; min-width: 100px; padding-top: 4px; width: 100%; border-color: #1d1d1b; border-width: 1px; elevation: 0; letter-spacing: 0.2px;"
143
- type="button"
141
+ class="sc-bdVaJa fhHIYP"
144
142
  >
145
143
  One click sign up
146
144
  </button>
@@ -155,37 +153,36 @@ exports[`Inline Newsletter Puff renders signup view when not already subscribed
155
153
  <body>
156
154
  <div>
157
155
  <div
158
- class="sc-bwzfXH sc-bxivhb gBLWdB"
156
+ class="sc-htpNat sc-ifAKCX iWYiTB"
159
157
  >
160
158
  <div
161
- class="sc-bwzfXH sc-dnqmqq dLVcgB"
159
+ class="sc-htpNat sc-iwsKbI cuimXU"
162
160
  >
163
161
  <div
164
- class="sc-htpNat sc-gZMcBi kiYplO"
162
+ class="sc-bxivhb sc-gqjmRU imXojB"
165
163
  >
166
164
  <div
167
- class="sc-htpNat sc-iwsKbI eLieBX"
165
+ class="sc-bxivhb sc-gZMcBi kRYdQT"
168
166
  >
169
167
  Politics. Explained.
170
168
  :
171
169
  </div>
172
170
  Sign up to receive our brilliant Red Box newsletter, Matt Chorley\`s poke at politics delivered every weekday morning at 8am.
173
171
  <div
174
- class="sc-bwzfXH sc-gqjmRU hGzDOp"
172
+ class="sc-htpNat sc-VigVT cSaWjg"
175
173
  >
176
174
  <button
177
- class="sc-bdVaJa bXCphr"
175
+ class="sc-bwzfXH gHDjoa"
178
176
  >
179
177
  One click sign up
180
178
  </button>
181
179
  </div>
182
180
  </div>
183
181
  <div
184
- class="sc-bwzfXH sc-gqjmRU hhmUDh"
182
+ class="sc-htpNat sc-VigVT iWOUWL"
185
183
  >
186
184
  <button
187
- style="font-family: GillSansMTStd-Medium; font-size: 16px; line-height: 0; align-items: center; background-color: transparent; border-radius: 2px; color: rgb(29, 29, 27); cursor: pointer; height: 48px; justify-content: center; min-width: 100px; padding-top: 4px; width: 100%; border-color: #1d1d1b; border-width: 1px; elevation: 0; letter-spacing: 0.2px;"
188
- type="button"
185
+ class="sc-bdVaJa fhHIYP"
189
186
  >
190
187
  One click sign up
191
188
  </button>
@@ -1,6 +1,5 @@
1
1
  import React from 'react';
2
- import Button from '@times-components/button';
3
- import { buttonStyles, LinkButton } from './styles';
2
+ import { PuffButton, PuffLinkButton } from './styles';
4
3
  import { useTrackingContext } from '../../../helpers/tracking/TrackingContextProvider';
5
4
 
6
5
  type NewsletterPuffProps = {
@@ -32,13 +31,10 @@ export const NewsletterPuffButton = ({
32
31
  };
33
32
 
34
33
  return style === 'button' ? (
35
- <Button
36
- title="One click sign up"
37
- onPress={() => handlePress()}
38
- style={buttonStyles}
39
- underlayColor="transparent"
40
- />
34
+ <PuffButton onClick={() => handlePress()}>One click sign up</PuffButton>
41
35
  ) : (
42
- <LinkButton onClick={() => handlePress()}>One click sign up</LinkButton>
36
+ <PuffLinkButton onClick={() => handlePress()}>
37
+ One click sign up
38
+ </PuffLinkButton>
43
39
  );
44
40
  };
@@ -2,22 +2,30 @@ import styled from 'styled-components';
2
2
 
3
3
  import { colours, fonts } from '@times-components/ts-styleguide';
4
4
 
5
- export const buttonStyles = {
6
- alignItems: 'center',
7
- backgroundColor: 'transparent',
8
- borderColor: colours.functional.brandColour,
9
- borderStyle: 'thin',
10
- borderWidth: 1,
11
- color: colours.functional.brandColour,
12
- elevation: 0,
13
- fontFamily: fonts.supporting,
14
- height: 48,
15
- justifyContent: 'center',
16
- letterSpacing: 0.2,
17
- width: '100%'
18
- };
5
+ export const PuffButton = styled.button`
6
+ font-family: GillSansMTStd-Medium;
7
+ font-size: 16px;
8
+ line-height: 0;
9
+ align-items: center;
10
+ background-color: transparent;
11
+ border-radius: 0px;
12
+ color: rgb(29, 29, 27);
13
+ cursor: pointer;
14
+ height: 48px;
15
+ justify-content: center;
16
+ min-width: 100px;
17
+ padding-top: 4px;
18
+ width: 100%;
19
+ border-color: rgb(29, 29, 27);
20
+ border-width: 1px;
21
+ letter-spacing: 0.2px;
19
22
 
20
- export const LinkButton = styled.button`
23
+ &:hover {
24
+ background-color: #e4e4e4;
25
+ }
26
+ `;
27
+
28
+ export const PuffLinkButton = styled.button`
21
29
  color: ${colours.functional.action};
22
30
  font-family: ${fonts.body};
23
31
  font-size: 18px;
@@ -25,4 +33,9 @@ export const LinkButton = styled.button`
25
33
  letter-spacing: -0.4px;
26
34
  border: none;
27
35
  background-color: white;
36
+ text-decoration-line: underline;
37
+
38
+ &:hover {
39
+ text-decoration-line: none;
40
+ }
28
41
  `;
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
2
  import Link from '@times-components/link';
3
+ import { HoverIcon } from '@times-components/utils';
3
4
 
4
5
  import { TrackingContextProvider } from '../../../helpers/tracking/TrackingContextProvider';
5
6
 
@@ -36,9 +37,11 @@ export const NewsletterPuffLink = ({ onPress }: any) => {
36
37
  url="https://home.thetimes.co.uk/myNews"
37
38
  onPress={() => handlePress()}
38
39
  >
39
- <InpPreferencesText ref={intersectObserverRef}>
40
- Manage preferences here
41
- </InpPreferencesText>
40
+ <HoverIcon underline={true} colour="#006699">
41
+ <InpPreferencesText ref={intersectObserverRef}>
42
+ Manage preferences here
43
+ </InpPreferencesText>
44
+ </HoverIcon>
42
45
  </Link>
43
46
  );
44
47
  }}
@@ -23,7 +23,7 @@ exports[`Preview Newsletter Puff renders 1`] = `
23
23
  class="sc-bdVaJa sc-htoDjs lnzLgr"
24
24
  >
25
25
  <button
26
- class="sc-iwsKbI gJJUIY"
26
+ class="sc-gZMcBi jWMqgP"
27
27
  >
28
28
  One click sign up
29
29
  </button>
@@ -33,8 +33,7 @@ exports[`Preview Newsletter Puff renders 1`] = `
33
33
  class="sc-bdVaJa sc-htoDjs fqXCoz"
34
34
  >
35
35
  <button
36
- style="font-family: GillSansMTStd-Medium; font-size: 16px; line-height: 0; align-items: center; background-color: transparent; border-radius: 2px; color: rgb(29, 29, 27); cursor: pointer; height: 48px; justify-content: center; min-width: 100px; padding-top: 4px; width: 100%; border-color: #1d1d1b; border-width: 1px; elevation: 0; letter-spacing: 0.2px;"
37
- type="button"
36
+ class="sc-iwsKbI clmQtq"
38
37
  >
39
38
  One click sign up
40
39
  </button>
@@ -60,4 +60,8 @@ export const InpPreferencesText = styled(Text)`
60
60
  text-align: left;
61
61
  letter-spacing: -0.4px;
62
62
  margin-bottom: ${spacing(3)};
63
+
64
+ @media (min-width: ${breakpoints.wide}px) {
65
+ display: block;
66
+ }
63
67
  `;
@@ -134,6 +134,11 @@ declare module '@times-components/utils' {
134
134
  value: string | number
135
135
  ) => string;
136
136
 
137
+ export const HoverIcon: React.FC<{
138
+ colour?: string;
139
+ hoverColour?: string;
140
+ underline?: boolean;
141
+ }>;
137
142
  export const TcView: React.FC<{ style?: React.CSSProperties }>;
138
143
  export const TcText: React.FC<{ style?: React.CSSProperties }>;
139
144
  export const TcScrollView: React.FC<{ style?: React.CSSProperties }>;
@@ -1 +0,0 @@
1
- export declare const capitaliseFirstCharacter: (stringToCapitalise?: string | undefined) => string | undefined;
@@ -1,9 +0,0 @@
1
- export const capitaliseFirstCharacter = (stringToCapitalise) => {
2
- if (!stringToCapitalise) {
3
- return;
4
- }
5
- const firstCharacter = stringToCapitalise.charAt(0);
6
- const restOfString = stringToCapitalise.split(firstCharacter);
7
- return `${firstCharacter.toUpperCase()}${restOfString[1]}`;
8
- };
9
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ2FwaXRhbGlzZUZpcnN0Q2hhcmFjdGVyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2hlbHBlcnMvdGV4dC1mb3JtYXR0aW5nL0NhcGl0YWxpc2VGaXJzdENoYXJhY3Rlci50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxNQUFNLENBQUMsTUFBTSx3QkFBd0IsR0FBRyxDQUFDLGtCQUEyQixFQUFFLEVBQUU7SUFDdEUsSUFBSSxDQUFDLGtCQUFrQixFQUFFO1FBQ3ZCLE9BQU87S0FDUjtJQUVELE1BQU0sY0FBYyxHQUFHLGtCQUFrQixDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsQ0FBQztJQUNwRCxNQUFNLFlBQVksR0FBRyxrQkFBa0IsQ0FBQyxLQUFLLENBQUMsY0FBYyxDQUFDLENBQUM7SUFDOUQsT0FBTyxHQUFHLGNBQWMsQ0FBQyxXQUFXLEVBQUUsR0FBRyxZQUFZLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQztBQUM3RCxDQUFDLENBQUMifQ==
@@ -1,12 +0,0 @@
1
- import { capitaliseFirstCharacter } from '../CapitaliseFirstCharacter';
2
- describe('capitaliseFirstCharacter()', () => {
3
- it('capitalizes the first character of a string', async () => {
4
- const copy = capitaliseFirstCharacter('sport');
5
- expect(copy).toBe('Sport');
6
- });
7
- it('returns early when a string is not passed as a parameter', async () => {
8
- const copy = capitaliseFirstCharacter();
9
- expect(copy).toBe(undefined);
10
- });
11
- });
12
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ2FwaXRhbGlzZUZpcnN0Q2hhcmFjdGVyLnRlc3QuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvaGVscGVycy90ZXh0LWZvcm1hdHRpbmcvX190ZXN0c19fL0NhcGl0YWxpc2VGaXJzdENoYXJhY3Rlci50ZXN0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsd0JBQXdCLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUV2RSxRQUFRLENBQUMsNEJBQTRCLEVBQUUsR0FBRyxFQUFFO0lBQzFDLEVBQUUsQ0FBQyw2Q0FBNkMsRUFBRSxLQUFLLElBQUksRUFBRTtRQUMzRCxNQUFNLElBQUksR0FBRyx3QkFBd0IsQ0FBQyxPQUFPLENBQUMsQ0FBQztRQUMvQyxNQUFNLENBQUMsSUFBSSxDQUFDLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxDQUFDO0lBQzdCLENBQUMsQ0FBQyxDQUFDO0lBRUgsRUFBRSxDQUFDLDBEQUEwRCxFQUFFLEtBQUssSUFBSSxFQUFFO1FBQ3hFLE1BQU0sSUFBSSxHQUFHLHdCQUF3QixFQUFFLENBQUM7UUFDeEMsTUFBTSxDQUFDLElBQUksQ0FBQyxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsQ0FBQztJQUMvQixDQUFDLENBQUMsQ0FBQztBQUNMLENBQUMsQ0FBQyxDQUFDIn0=
@@ -1,9 +0,0 @@
1
- export const capitaliseFirstCharacter = (stringToCapitalise?: string) => {
2
- if (!stringToCapitalise) {
3
- return;
4
- }
5
-
6
- const firstCharacter = stringToCapitalise.charAt(0);
7
- const restOfString = stringToCapitalise.split(firstCharacter);
8
- return `${firstCharacter.toUpperCase()}${restOfString[1]}`;
9
- };
@@ -1,13 +0,0 @@
1
- import { capitaliseFirstCharacter } from '../CapitaliseFirstCharacter';
2
-
3
- describe('capitaliseFirstCharacter()', () => {
4
- it('capitalizes the first character of a string', async () => {
5
- const copy = capitaliseFirstCharacter('sport');
6
- expect(copy).toBe('Sport');
7
- });
8
-
9
- it('returns early when a string is not passed as a parameter', async () => {
10
- const copy = capitaliseFirstCharacter();
11
- expect(copy).toBe(undefined);
12
- });
13
- });