-
Notifications
You must be signed in to change notification settings - Fork 25
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add DiscountApplicationStrategyCard
- Loading branch information
Showing
11 changed files
with
277 additions
and
0 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| '@shopify/discount-app-components': minor | ||
| --- | ||
|
|
||
| Add DiscountAppStrategyCard |
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
55 changes: 55 additions & 0 deletions
55
src/components/DiscountAppStrategyCard/DiscountAppStrategyCard.tsx
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,55 @@ | ||
| import React, {useCallback, useState} from 'react'; | ||
| import {Box, Card, ChoiceList, Text, VerticalStack} from '@shopify/polaris'; | ||
| import {useI18n} from '@shopify/react-i18n'; | ||
|
|
||
| import {DiscountApplicationStrategy} from '../../types'; | ||
|
|
||
| export interface DiscountAppStrategyProps { | ||
| /** | ||
| * The discount application strategy. | ||
| */ | ||
| strategy: DiscountApplicationStrategy; | ||
| } | ||
|
|
||
| const I18N_SCOPE = { | ||
| scope: 'DiscountAppComponents.DiscountAppStrategyCard', | ||
| }; | ||
|
|
||
| export function DiscountAppStrategyCard({strategy}: DiscountAppStrategyProps) { | ||
| const [i18n] = useI18n(); | ||
| const [selected, setSelected] = useState<string[]>([ | ||
| JSON.stringify(strategy), | ||
| ]); | ||
|
|
||
| const handleChange = useCallback((value: string[]) => setSelected(value), []); | ||
|
|
||
| return ( | ||
| <Box paddingBlockEnd="4"> | ||
| <Card padding="4"> | ||
| <VerticalStack gap="4"> | ||
| <Text variant="headingMd" as="h2"> | ||
| {i18n.translate('title', I18N_SCOPE)} | ||
| </Text> | ||
| <ChoiceList | ||
| title={i18n.translate('title', I18N_SCOPE)} | ||
| titleHidden | ||
| choices={[ | ||
| { | ||
| label: i18n.translate('first.label', I18N_SCOPE), | ||
| value: i18n.translate('first.label', I18N_SCOPE), | ||
| helpText: i18n.translate('first.helpText', I18N_SCOPE), | ||
| }, | ||
| { | ||
| label: i18n.translate('maximum.label', I18N_SCOPE), | ||
| value: i18n.translate('maximum.label', I18N_SCOPE), | ||
| helpText: i18n.translate('maximum.helpText', I18N_SCOPE), | ||
| }, | ||
| ]} | ||
| selected={selected} | ||
| onChange={handleChange} | ||
| /> | ||
| </VerticalStack> | ||
| </Card> | ||
| </Box> | ||
| ); | ||
| } |
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,19 @@ | ||
| # DiscountAppStategyCard | ||
|
|
||
| The Discount Application Strategy Card enables users to toggle between `discountApplicationStrategy`s to select between `All`, `First`, and `Maximum` strategies. | ||
|
|
||
| --- | ||
|
|
||
| ## Usage and best practices | ||
|
|
||
| - The discount code length only adjusts the default length of generated codes, and does not set a max length for the text input | ||
|
|
||
| ## Examples | ||
|
|
||
| ### Basic usage | ||
|
|
||
| ```jsx | ||
| <DiscountAppStategyCard | ||
| strategy="All | ||
| /> | ||
| ``` |
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 @@ | ||
| export * from './DiscountAppStrategyCard'; |
24 changes: 24 additions & 0 deletions
24
src/components/DiscountAppStrategyCard/tests/DiscountAppStrategyCard.test.tsx
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,24 @@ | ||
| import React from 'react'; | ||
| import {TextField} from '@shopify/polaris'; | ||
| import {mountWithApp} from 'tests/utilities'; | ||
|
|
||
| import {DiscountAppStrategyCard} from '../DiscountAppStrategyCard'; | ||
| import {DiscountApplicationStrategy} from '../../../types'; | ||
|
|
||
| describe('<DiscountAppStrategyCard />', () => { | ||
| const mockProps = { | ||
| strategy: DiscountApplicationStrategy.First, | ||
| }; | ||
|
|
||
| afterEach(() => { | ||
| jest.resetAllMocks(); | ||
| }); | ||
|
|
||
| it('renders a DiscountAppStrategyCard', () => { | ||
| const methodCard = mountWithApp(<DiscountAppStrategyCard {...mockProps} />); | ||
|
|
||
| expect(methodCard).not.toContainReactComponent(TextField, { | ||
| label: 'Title', | ||
| }); | ||
| }); | ||
| }); |
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
19 changes: 19 additions & 0 deletions
19
...tories/patterns/DiscountAppStrategyCardPattern/DiscountAppStrategyCardPattern.stories.tsx
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,19 @@ | ||
| import React from 'react'; | ||
| import {Provider} from '../../foundation/Provider'; | ||
| import DiscountAppStrategyCard from './DiscountAppStrategyCardPattern'; | ||
|
|
||
| // eslint-disable-next-line import/no-default-export, import/no-anonymous-default-export | ||
| export default { | ||
| title: 'DiscountAppStrategyCard pattern', | ||
| parameters: { | ||
| layout: 'fullscreen', | ||
| }, | ||
| }; | ||
|
|
||
| const ApplicationStrategyCardPattern = () => ( | ||
| <Provider> | ||
| <DiscountAppStrategyCard /> | ||
| </Provider> | ||
| ); | ||
|
|
||
| export {ApplicationStrategyCardPattern}; |
13 changes: 13 additions & 0 deletions
13
src/stories/patterns/DiscountAppStrategyCardPattern/DiscountAppStrategyCardPattern.tsx
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,13 @@ | ||
| import React from 'react'; | ||
|
|
||
| import {Page} from '@shopify/polaris'; | ||
| import {DiscountAppStrategyCard} from '../../../components/DiscountAppStrategyCard'; | ||
| import {DiscountApplicationStrategy} from '../../../types'; | ||
|
|
||
| export default function MethodCardPattern() { | ||
| return ( | ||
| <Page> | ||
| <DiscountAppStrategyCard strategy={DiscountApplicationStrategy.First} /> | ||
| </Page> | ||
| ); | ||
| } |
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