Skip to content

Commit

Permalink
Add footer help example to polaris.shopify.com
Browse files Browse the repository at this point in the history
Adjust alignment strings

Add block stack import
  • Loading branch information
itwasmattgregg committed Mar 21, 2024
1 parent a01a6b2 commit a4867f5
Show file tree
Hide file tree
Showing 2 changed files with 33 additions and 0 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,9 @@ examples:
- fileName: footer-help-default.tsx
title: Default
description: Use to direct merchants to more information related to the product or feature they’re working on.
- fileName: footer-help-align.tsx
title: Align
description: Control the horizontal alignment of component using the align prop.
previewImg: /images/components/navigation/footer-help.png
---

Expand Down
30 changes: 30 additions & 0 deletions polaris.shopify.com/pages/examples/footer-help-align.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import {BlockStack, FooterHelp, Link} from '@shopify/polaris';
import React from 'react';
import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';

function FooterHelpAlignExample() {
return (
<BlockStack gap="1600">
<FooterHelp align="start">
Start{' '}
<Link url="https://help.shopify.com/manual/orders/fulfill-orders">
fulfilling orders
</Link>
</FooterHelp>
<FooterHelp align="center">
Center{' '}
<Link url="https://help.shopify.com/manual/orders/fulfill-orders">
fulfilling orders
</Link>
</FooterHelp>
<FooterHelp align="end">
End{' '}
<Link url="https://help.shopify.com/manual/orders/fulfill-orders">
fulfilling orders
</Link>
</FooterHelp>
</BlockStack>
);
}

export default withPolarisExample(FooterHelpAlignExample);

0 comments on commit a4867f5

Please sign in to comment.