-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #20 from white-label-loyalty/docs/add-component-do…
…cumentation Docs/add component documentation
- Loading branch information
Showing
22 changed files
with
2,607 additions
and
43 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,40 @@ | ||
| name: Deploy VitePress to Vercel | ||
|
|
||
| on: | ||
| push: | ||
| branches: ['main'] | ||
| workflow_dispatch: | ||
|
|
||
| jobs: | ||
| deploy: | ||
| runs-on: ubuntu-latest | ||
| steps: | ||
| - name: Checkout | ||
| uses: actions/checkout@v4 | ||
|
|
||
| - name: Setup Node | ||
| uses: actions/setup-node@v4 | ||
| with: | ||
| node-version: '18' | ||
| cache: npm | ||
|
|
||
| - name: Install dependencies | ||
| run: npm ci | ||
|
|
||
| - name: Build | ||
| run: npm run docs:build | ||
|
|
||
| - name: Get Vercel Project ID | ||
| id: get-vercel-project-id | ||
| run: echo "::set-output name=VERCEL_PROJECT_ID::$(npx vercel env pull --yes 2>/dev/null | grep -oP '(?<=VERCEL_PROJECT_ID=)[^\\r\\n]*')" | ||
| env: | ||
| VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }} | ||
|
|
||
| - name: Deploy to Vercel | ||
| uses: amondnet/vercel-action@v25 | ||
| with: | ||
| vercel-token: ${{ secrets.VERCEL_TOKEN }} | ||
| vercel-org-id: ${{ secrets.VERCEL_ORG_ID }} | ||
| vercel-project-id: ${{ steps.get-vercel-project-id.outputs.VERCEL_PROJECT_ID }} | ||
| working-directory: docs/.vitepress/dist | ||
| vercel-args: '--prod' |
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
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,74 @@ | ||
| export default { | ||
| base: '/wll-react-sdk/', | ||
| title: 'Loyalty Tiles SDK', | ||
| description: | ||
| 'A flexible component library for building customizable loyalty program interfaces', | ||
| themeConfig: { | ||
| socialLinks: [ | ||
| { | ||
| icon: 'github', | ||
| link: 'https://github.com/white-label-loyalty/wll-react-sdk', | ||
| }, | ||
| ], | ||
| footer: { | ||
| message: 'Released under the MIT License.', | ||
| copyright: 'Copyright © 2024 White Label Loyalty', | ||
| }, | ||
| nav: [ | ||
| { text: 'Home', link: '/' }, | ||
| { text: 'Guide', link: '/guide/getting-started' }, | ||
| { text: 'Components', link: '/components' }, | ||
| { text: 'Platform Integration', link: '/platform-integration' }, | ||
| { | ||
| text: 'Storybook', | ||
| link: 'https://66c36701bb14ec551f38279c-ueompbfvfq.chromatic.com/', | ||
| }, | ||
| ], | ||
| sidebar: { | ||
| '/guide/': [ | ||
| { | ||
| text: 'Introduction', | ||
| items: [ | ||
| { text: 'Getting Started', link: '/guide/getting-started' }, | ||
| { text: 'Theme', link: '/guide/theming' }, | ||
| ], | ||
| }, | ||
| ], | ||
| '/components/': [ | ||
| { | ||
| text: 'Overview', | ||
| items: [{ text: 'Introduction', link: '/components/' }], | ||
| }, | ||
| { | ||
| text: 'Core', | ||
| items: [ | ||
| { text: 'WllSdkProvider', link: '/components/wll-sdk-provider' }, | ||
| { text: 'Group', link: '/components/group' }, | ||
| { text: 'Section', link: '/components/section' }, | ||
| ], | ||
| }, | ||
| { | ||
| text: 'Tiles', | ||
| items: [ | ||
| { text: 'Badge Tile', link: '/components/badge-tile' }, | ||
| { text: 'Banner Tile', link: '/components/banner-tile' }, | ||
| { text: 'Content Tile', link: '/components/content-tile' }, | ||
| { text: 'Points Tile', link: '/components/points-tile' }, | ||
| { | ||
| text: 'Reward Category Tile', | ||
| link: '/components/reward-category-tile', | ||
| }, | ||
| { text: 'Reward Tile', link: '/components/reward-tile' }, | ||
| { text: 'Tier Tile', link: '/components/tier-tile' }, | ||
| ], | ||
| }, | ||
| ], | ||
| '/platform-integration/': [ | ||
| { | ||
| text: 'Platform Integration', | ||
| items: [{ text: 'Overview', link: '/platform-integration/' }], | ||
| }, | ||
| ], | ||
| }, | ||
| }, | ||
| }; |
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,64 @@ | ||
| # Badge Tile | ||
|
|
||
| Displays achievement badges with support for latest earned, specific badges, and multiple achievement states. | ||
|
|
||
| > ⚠️ **Important**: This component only supports full height tiles (`tileHeight: 'FULL'`). Half-height tiles are not supported. | ||
| ## Usage | ||
|
|
||
| ```jsx | ||
| import { BadgeTile } from '@wlloyalty/wll-react-sdk' | ||
|
|
||
| const tile = { | ||
| type: 'BADGE', | ||
| tileHeight: 'FULL', | ||
| configuration: { | ||
| type: 'SPECIFIC', | ||
| name: 'Top Spender', | ||
| description: 'Spent £100 on 5 Separate transactions', | ||
| artworkUrl: 'https://example.com/badge.png', | ||
| count: 1, | ||
| awardedDatePrefix: 'Awarded', | ||
| badgeNotEarnedMessage: 'Badge not earned yet', | ||
| emptyBadgeMessage: "You haven't earned any badges yet" | ||
| } | ||
| } | ||
|
|
||
| function MyComponent() { | ||
| return <BadgeTile tile={tile} /> | ||
| } | ||
| ``` | ||
|
|
||
| ## Props | ||
|
|
||
| | Name | Type | Required | Description | | ||
| |------|------|----------|-------------| | ||
| | tile | `Tile` | Yes | Badge tile configuration | | ||
|
|
||
| ## Configuration Object | ||
|
|
||
| | Property | Type | Description | | ||
| |----------|------|-------------| | ||
| | type | 'SPECIFIC' \| 'LATEST_EARNED' | Badge display type | | ||
| | name | string | Badge name | | ||
| | description | string | Badge description | | ||
| | artworkUrl | string | Badge image URL | | ||
| | count | number | Times achieved (0 = locked) | | ||
| | awardedDatePrefix | string | Text before award date | | ||
| | badgeNotEarnedMessage | string | Message for unearned badges | | ||
| | emptyBadgeMessage | string | Message when no badges earned | | ||
|
|
||
| ## States | ||
|
|
||
| - **Not Earned**: Shows lock icon (count: 0) | ||
| - **Earned Once**: Shows badge with award date | ||
| - **Multiple Earned**: Shows badge with count (e.g., "3x") | ||
| - **Latest Badge**: Special display for most recent achievement | ||
|
|
||
| ## Composition | ||
|
|
||
| - `BadgeTile.Media` - Badge artwork container | ||
| - `BadgeTile.Status` - Lock icon or achievement count | ||
| - `BadgeTile.Title` - Badge name or empty state message | ||
| - `BadgeTile.Description` - Badge description | ||
| - `BadgeTile.DateEarned` - Award date or status message |
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,57 @@ | ||
| # Banner Tile | ||
|
|
||
| Displays promotional banners with an image, text content, and optional call-to-action button. | ||
|
|
||
| > ⚠️ **Important**: This component only supports full height tiles (`tileHeight: 'FULL'`). Half-height tiles are not supported. | ||
| ## Usage | ||
|
|
||
| ```jsx | ||
| import { BannerTile } from '@wlloyalty/wll-react-sdk' | ||
|
|
||
| const tile = { | ||
| type: 'BANNER', | ||
| tileHeight: 'FULL', | ||
| configuration: { | ||
| artworkUrl: 'https://example.com/banner.jpg', | ||
| title: 'Summer Sale', | ||
| description: 'Get up to 50% off on selected items!', | ||
| ctaText: 'SHOP NOW', | ||
| ctaLink: 'https://www.example.com', | ||
| ctaLinkTarget: 'SAME_FRAME' | ||
| } | ||
| } | ||
|
|
||
| function MyComponent() { | ||
| return <BannerTile tile={tile} /> | ||
| } | ||
| ``` | ||
|
|
||
| ## Props | ||
|
|
||
| | Name | Type | Required | Description | | ||
| |------|------|----------|-------------| | ||
| | tile | `Tile` | Yes | Banner tile configuration | | ||
|
|
||
| ## Configuration Object | ||
|
|
||
| | Property | Type | Description | | ||
| |----------|------|-------------| | ||
| | artworkUrl | string | Banner image URL | | ||
| | title | string | Banner headline | | ||
| | description | string | Banner description text | | ||
| | ctaText | string | Button text (optional) | | ||
| | ctaLink | string | URL, path (/activity), or trigger (#modal-name) | | ||
| | ctaLinkTarget | 'SAME_FRAME' \| 'NEW_WINDOW' | Link target behavior | | ||
|
|
||
| ## States | ||
|
|
||
| - **With CTA**: Displays banner with button | ||
| - **Without CTA**: Displays banner content only (when ctaText is empty) | ||
|
|
||
| ## Composition | ||
|
|
||
| - `BannerTile.Image` - Banner image display | ||
| - `BannerTile.Title` - Banner headline | ||
| - `BannerTile.Description` - Banner description text | ||
| - `BannerTile.CTA` - Call-to-action button |
Oops, something went wrong.