@transferwise/components 0.0.0-experimental-a818408 → 0.0.0-experimental-9cff936

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 (6) hide show
  1. package/package.json +1 -1
  2. package/src/actionOption/ActionOption.story.tsx +15 -11
  3. package/src/checkboxOption/CheckboxOption.story.tsx +4 -2
  4. package/src/navigationOption/NavigationOption.story.js +4 -2
  5. package/src/radioOption/RadioOption.story.tsx +4 -2
  6. package/src/switchOption/SwitchOption.story.tsx +4 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "0.0.0-experimental-a818408",
3
+ "version": "0.0.0-experimental-9cff936",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
package/src/actionOption/ActionOption.story.tsx CHANGED
@@ -2,7 +2,7 @@ import { action } from '@storybook/addon-actions';
2
2
  import { Meta, StoryObj } from '@storybook/react';
3
3
  import { FastFlag as FastFlagIcon } from '@transferwise/icons';
4
4
 
5
- import { Nudge } from '..';
5
+ import { Nudge, Title, Typography } from '..';
6
6
 
7
7
  import ActionOption from './ActionOption';
8
8
 
@@ -32,19 +32,23 @@ export const WithSecondarypriority: Story = {
32
32
  export const WithContainerContent: Story = {
33
33
  render: (args) => (
34
34
  <>
35
- <h2 className="m-b-2">Choose how to pay</h2>
35
+ <Title type={Typography.TITLE_SUBSECTION} className="m-b-1">
36
+ Choose how to pay
37
+ </Title>
36
38
  <ActionOption {...args} />
37
39
  <ActionOption {...args} />
38
40
  <ActionOption {...args} />
39
- <Nudge
40
- className="m-t-2"
41
- mediaName="globe"
42
- title="Text that is no longer than two lines."
43
- link="Link"
44
- href="#"
45
- onClick={action('action clicked')}
46
- onDismiss={action('dismissed')}
47
- />
41
+ <div>
42
+ <Nudge
43
+ className="m-t-2"
44
+ mediaName="globe"
45
+ title="Text that is no longer than two lines."
46
+ link="Link"
47
+ href="#"
48
+ onClick={action('action clicked')}
49
+ onDismiss={action('dismissed')}
50
+ />
51
+ </div>
48
52
  </>
49
53
  ),
50
54
  };
package/src/checkboxOption/CheckboxOption.story.tsx CHANGED
@@ -4,7 +4,7 @@ import { Meta } from '@storybook/react';
4
4
  import { FastFlag as FastFlagIcon } from '@transferwise/icons';
5
5
  import { useState } from 'react';
6
6
 
7
- import { Nudge } from '..';
7
+ import { Nudge, Title, Typography } from '..';
8
8
 
9
9
  import CheckboxOption from './CheckboxOption';
10
10
 
@@ -56,7 +56,9 @@ export const Multiple = () => {
56
56
 
57
57
  export const WithContainerContent = () => (
58
58
  <>
59
- <h2 className="m-b-2">Choose how to pay</h2>
59
+ <Title type={Typography.TITLE_SUBSECTION} className="m-b-1">
60
+ Choose how to pay
61
+ </Title>
60
62
  <Template />
61
63
  <Template />
62
64
  <Template />
package/src/navigationOption/NavigationOption.story.js CHANGED
@@ -9,7 +9,7 @@ import {
9
9
  } from '@transferwise/icons';
10
10
  import { Illustration, Assets, Flag } from '@wise/art';
11
11
 
12
- import { Badge, Nudge, Avatar, Header } from '..';
12
+ import { Badge, Nudge, Avatar, Header, Title, Typography } from '..';
13
13
 
14
14
  import NavigationOption from './NavigationOption';
15
15
 
@@ -146,7 +146,9 @@ export const WithIllustration = () => {
146
146
 
147
147
  export const WithContainerContent = () => (
148
148
  <>
149
- <h2 className="m-b-2">Choose how to pay</h2>
149
+ <Title type={Typography.TITLE_SUBSECTION} className="m-b-1">
150
+ Choose how to pay
151
+ </Title>
150
152
  <Template />
151
153
  <Template />
152
154
  <Template />
package/src/radioOption/RadioOption.story.tsx CHANGED
@@ -3,7 +3,7 @@ import { boolean, text } from '@storybook/addon-knobs';
3
3
  import { FastFlag as FastFlagIcon } from '@transferwise/icons';
4
4
  import { useState } from 'react';
5
5
 
6
- import { Nudge } from '..';
6
+ import { Nudge, Title, Typography } from '..';
7
7
 
8
8
  import RadioOption, { RadioOptionProps } from './RadioOption';
9
9
 
@@ -63,7 +63,9 @@ export const WithContainerContent = () => {
63
63
 
64
64
  return (
65
65
  <>
66
- <h2 className="m-b-2">Choose how to pay</h2>
66
+ <Title type={Typography.TITLE_SUBSECTION} className="m-b-1">
67
+ Choose how to pay
68
+ </Title>
67
69
  <Template checked={selected === 0} onChange={() => setSelected(0)} />
68
70
  <Template checked={selected === 1} onChange={() => setSelected(1)} />
69
71
  <Template checked={selected === 2} onChange={() => setSelected(2)} />
package/src/switchOption/SwitchOption.story.tsx CHANGED
@@ -3,7 +3,7 @@ import { text, boolean } from '@storybook/addon-knobs';
3
3
  import { FastFlag as FastFlagIcon } from '@transferwise/icons';
4
4
  import { useState } from 'react';
5
5
 
6
- import { Nudge } from '..';
6
+ import { Nudge, Title, Typography } from '..';
7
7
 
8
8
  import SwitchOption from './SwitchOption';
9
9
 
@@ -54,7 +54,9 @@ export const Multiple = () => {
54
54
  export const WithContainerContent = () => {
55
55
  return (
56
56
  <>
57
- <h2 className="m-b-2">Choose how to pay</h2>
57
+ <Title type={Typography.TITLE_SUBSECTION} className="m-b-1">
58
+ Choose how to pay
59
+ </Title>
58
60
  <Template />
59
61
  <Template />
60
62
  <Template />