-
Notifications
You must be signed in to change notification settings - Fork 15
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- All docs ported to Storybook 7 and React 18
- Loading branch information
1 parent
7eac87b
commit fb869a1
Showing
18 changed files
with
527 additions
and
25 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,16 +1,83 @@ | ||
import { CardElement } from '../../lib'; | ||
import { stylePropFor } from '../shared/controls'; | ||
import { displayIcon, inputType } from '../shared/args'; | ||
import { withElements } from '../shared/decorators'; | ||
import { | ||
RecurlyProvider, | ||
Elements, | ||
CardElement | ||
} from '../../lib'; | ||
|
||
export default { | ||
component: CardElement, | ||
tags: ['autodocs'] | ||
title: 'Components/Card Element', | ||
argTypes: { displayIcon, inputType }, | ||
tags: ['autodocs'], | ||
decorators: [withElements], | ||
parameters: { | ||
componentSubtitle: 'Accept all card parameters in one place', | ||
docs: { | ||
description: { | ||
component: ` | ||
A [Card Element](https://developers.recurly.com/reference/recurly-js/#the-card-element) | ||
component which wraps its Recurly.js analogue, passing configuration props to the underlying | ||
Recurly.js CardElement and allowing event binding using props. | ||
Your users will enter their card information (number, expiry, and cvv) here. | ||
` | ||
} | ||
} | ||
} | ||
}; | ||
|
||
export const Primary = { | ||
// render: () => <CardElement />, | ||
export const Default = { | ||
args: { | ||
// publicKey: 'MY_PUBLIC_KEY' | ||
style: stylePropFor(CardElement) | ||
} | ||
}; | ||
|
||
export const DropdownExpiry = { | ||
parameters: { | ||
docs: { | ||
description: { | ||
story: 'Set `inputType="select"` to render a `<select>` in place of default expiry text input.' | ||
} | ||
} | ||
}, | ||
args: { | ||
inputType: 'select' | ||
} | ||
}; | ||
|
||
export const Localized = { | ||
parameters: { | ||
componentSubtitle: 'Accept all card parameters in one place' | ||
docs: { | ||
description: { | ||
story: 'Set `placeholder.content` to localize the `CardElement`.' | ||
} | ||
} | ||
}, | ||
args: { | ||
style: { | ||
placeholder: { | ||
content: { | ||
number: 'Numéro de Carte', | ||
expiry: 'MM / AA', | ||
cvv: 'CVC' | ||
} | ||
} | ||
} | ||
} | ||
}; | ||
|
||
export const WithoutCardIcon = { | ||
parameters: { | ||
docs: { | ||
description: { | ||
story: 'Set `displayIcon={false}` to disable the card brand icon.' | ||
} | ||
} | ||
}, | ||
args: { | ||
displayIcon: false | ||
} | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,14 +1,17 @@ | ||
import { RecurlyProvider, Elements } from '../../lib'; | ||
|
||
export default { | ||
component: Elements | ||
}; | ||
|
||
export const Primary = { | ||
render: () => <RecurlyProvider publicKey="MY_PUBLIC_KEY"> | ||
<Elements /> | ||
</RecurlyProvider>, | ||
component: Elements, | ||
title: 'Components/Elements', | ||
parameters: { | ||
componentSubtitle: 'Top-level component' | ||
} | ||
}; | ||
|
||
export const Default = { | ||
render: () => ( | ||
<RecurlyProvider publicKey="MY_PUBLIC_KEY"> | ||
<Elements /> | ||
</RecurlyProvider> | ||
) | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,12 +1,13 @@ | ||
import { RecurlyProvider } from '../../lib'; | ||
|
||
export default { | ||
component: RecurlyProvider | ||
}; | ||
|
||
export const Primary = { | ||
render: () => <RecurlyProvider publicKey="MY_PUBLIC_KEY" />, | ||
component: RecurlyProvider, | ||
title: 'Components/RecurlyProvider', | ||
parameters: { | ||
componentSubtitle: 'Top-level component' | ||
} | ||
}; | ||
|
||
export const Default = { | ||
render: () => <RecurlyProvider publicKey="MY_PUBLIC_KEY" /> | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
import { Meta, Title, Subtitle, Controls } from '@storybook/addon-docs/blocks'; | ||
import * as RiskDataCollectorStories from './RiskDataCollector.stories'; | ||
|
||
<Meta of={RiskDataCollectorStories} /> | ||
<Title /> | ||
<Subtitle /> | ||
|
||
`import { RiskDataCollector } from '@recurly/react-recurly';` | ||
|
||
This component adds data collection elements to your checkout which are applied to any tokens generated within the bounds of its nearest ascendant parent `HTMLFormElement`. | ||
|
||
This component is compatible with [Recurly Fraud Management][doc-recurly-fraud-management] and [Kount][doc-kount]. | ||
|
||
```js | ||
import { RiskDataCollector } from '@recurly/react-recurly'; | ||
|
||
() => { | ||
const handleError = (error) => { | ||
// error.code | ||
// error.message | ||
}; | ||
|
||
return ( | ||
<RiskDataCollector | ||
strategy="kount" | ||
onError={handleError} | ||
/> | ||
); | ||
}; | ||
``` | ||
|
||
<Controls /> | ||
|
||
[doc-recurly-fraud-management]: https://docs.recurly.com/docs/fraud-management | ||
[doc-kount]: https://docs.recurly.com/docs/kount |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
import { RiskDataCollector } from '../../lib'; | ||
|
||
export default { | ||
component: RiskDataCollector, | ||
title: 'Components/RiskDataCollector', | ||
parameters: { | ||
componentSubtitle: 'Fraud protection for your checkout' | ||
} | ||
}; | ||
|
||
export const Default = { | ||
args: { | ||
strategy: 'kount' | ||
} | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
import { Meta, Title, Subtitle, Controls } from '@storybook/addon-docs/blocks'; | ||
import * as ThreeDSecureActionStories from './ThreeDSecureAction.stories'; | ||
|
||
<Meta of={ThreeDSecureActionStories} /> | ||
<Title /> | ||
<Subtitle /> | ||
|
||
`import { ThreeDSecureAction } from '@recurly/react-recurly';` | ||
|
||
This component renders a 3-D Secure authentication flow. If you receive a `three_d_secure_action_token_id` from the [Recurly API][recurly-api], use it with this component to process the authentication and receive a result token. | ||
|
||
[More about Strong Customer Authentication][doc-sca] | ||
|
||
[Recurly 3-D Secure integration documentation][doc-3ds-integration] | ||
|
||
```js | ||
import { ThreeDSecureAction } from '@recurly/react-recurly'; | ||
|
||
() => { | ||
const handleToken = (token) => { | ||
// token.type => 'three_d_secure_action_result' | ||
// token.id | ||
}; | ||
|
||
return ( | ||
<ThreeDSecureAction | ||
actionTokenId="MY_ACTION_TOKEN_ID" | ||
onToken={handleToken} | ||
/> | ||
); | ||
}; | ||
``` | ||
|
||
<Controls /> | ||
|
||
[recurly-api]: https://developers.recurly.com/api/ | ||
[doc-sca]: https://docs.recurly.com/docs/revised-payment-services-directive-psd2 | ||
[doc-3ds-integration]: https://dev.recurly.com/page/recurly-3d-secure-2-integration-guide |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
import { ThreeDSecureAction } from '../../lib'; | ||
|
||
export default { | ||
component: ThreeDSecureAction, | ||
title: 'Components/ThreeDSecureAction', | ||
parameters: { | ||
componentSubtitle: 'Display a 3-D Secure authentication flow' | ||
} | ||
}; | ||
|
||
export const Default = { | ||
args: { | ||
actionTokenId: 'MY_ACTION_TOKEN_ID' | ||
} | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
import { withElements } from '../../shared/decorators'; | ||
import { stylePropFor } from '../../shared/controls'; | ||
import { CardCvvElement } from '../../../lib'; | ||
|
||
export default { | ||
component: CardCvvElement, | ||
title: 'Components/Individual Card Elements/CardCvvElement', | ||
tags: ['autodocs'], | ||
decorators: [withElements], | ||
parameters: { | ||
componentSubtitle: 'Display a Card Verification Value (CVV) input' | ||
} | ||
}; | ||
|
||
export const Default = { | ||
args: { | ||
style: stylePropFor(CardCvvElement) | ||
} | ||
}; | ||
|
||
export const Placeholder = { | ||
args: { | ||
placeholder: { | ||
content: 'CVV' | ||
} | ||
} | ||
}; | ||
|
||
export const Localized = { | ||
parameters: { | ||
docs: { | ||
description: { | ||
story: 'Set `placeholder.content` to localize the `CardCvvElement`.' | ||
} | ||
} | ||
}, | ||
args: { | ||
placeholder: { | ||
content: 'CVC' | ||
} | ||
} | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,60 @@ | ||
import { withElements } from '../../shared/decorators'; | ||
import { stylePropFor } from '../../shared/controls'; | ||
import { inputType } from '../../shared/args'; | ||
import { CardMonthElement } from '../../../lib'; | ||
|
||
export default { | ||
component: CardMonthElement, | ||
title: 'Components/Individual Card Elements/CardMonthElement', | ||
tags: ['autodocs'], | ||
argTypes: { inputType }, | ||
decorators: [withElements], | ||
parameters: { | ||
componentSubtitle: 'Display a card expiration month input' | ||
} | ||
}; | ||
|
||
export const Default = { | ||
args: { | ||
style: stylePropFor(CardMonthElement) | ||
} | ||
}; | ||
|
||
export const Dropdown = () => { | ||
parameters: { | ||
docs: { | ||
description: { | ||
story: 'Set `inputType="select"` or `inputType="mobileSelect"` to display use a `<select>` dropdown.' | ||
} | ||
} | ||
} | ||
args: { | ||
inputType: 'select' | ||
} | ||
}; | ||
export const Placeholder = { | ||
args: { | ||
style: { | ||
placeholder: { | ||
content: 'MM' | ||
} | ||
} | ||
} | ||
}; | ||
|
||
export const Localized = { | ||
parameters: { | ||
docs: { | ||
description: { | ||
story: 'Set `placeholder.content` to localize the `CardMonthElement`.' | ||
} | ||
} | ||
}, | ||
args: { | ||
style: { | ||
placeholder: { | ||
content: 'Mo' | ||
} | ||
} | ||
} | ||
}; |
Oops, something went wrong.