Skip to content

Commit

Permalink
Demo Page integration for iaux-book-actions repo (#73)
Browse files Browse the repository at this point in the history
Demo Page integration for iaux-book-actions repo
  • Loading branch information
nsharma123 committed Jul 15, 2024
1 parent f5b1f9e commit 5a6b03a
Show file tree
Hide file tree
Showing 16 changed files with 1,134 additions and 211 deletions.
26 changes: 26 additions & 0 deletions .github/workflows/ci.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
name: App CI

on:
push:
branches: [ main ]
pull_request:
branches: [ main ]

jobs:
build:
runs-on: ubuntu-latest

steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v3
with:
node-version: 16.x

- name: Install dependencies
run: yarn install

# - name: Run tests
# run: yarn run test

# - name: Upload reports
# run: npx codecov
37 changes: 37 additions & 0 deletions .github/workflows/pr-preview.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
# This workflow will generate the static page under `pr` subdirectory inside the `gh-pages` branch

# This workflow will run every time there's a PR opened, reopened, synchronize, or closed

name: Deploy PR previews

on:
pull_request:
types:
- opened
- reopened
- synchronize
- closed

concurrency: preview-${{ github.ref }}

jobs:
deploy-preview:
runs-on: ubuntu-20.04
steps:
- name: Checkout
uses: actions/checkout@v4

- uses: actions/setup-node@v3
with:
node-version: 20.x

- name: Install and Build
run: |
yarn install
yarn prepare:ghpages
# Reference: https://github.com/rossjrw/pr-preview-action
- name: Deploy preview
uses: rossjrw/pr-preview-action@v1
with:
source-dir: ./ghpages/
umbrella-dir: pr
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -23,3 +23,5 @@
storybook-static
/src-temp/
/src-temp1/

ghpages
183 changes: 183 additions & 0 deletions ghpages/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,183 @@
<!doctype html>
<html lang="en-GB">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style>
html {
font-size: 10px;
/* This is to match petabox's base font size */
}
body {
margin: 0;
text-align: center;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#demo {
height: 100px;
}
ia-book-actions {
--white: #fff;
--black: #000;
--primaryBGColor: var(--black);
--secondaryBGColor: #222;
--tertiaryBGColor: #333;
--primaryTextColor: var(--white);
--primaryCTAFill: #194880;
--primaryCTABorder: #c5d1df;
--secondaryCTAFill: #333;
--secondaryCTABorder: #999;
--secondaryCTAFillRGB: 51, 51, 51;
--primaryErrorCTAFill: #e51c26;
--primaryErrorCTABorder: #f8c6c8;
--primaryCTAFillRGB: 25, 72, 128;
--primaryErrorCTAFillRGB: 229, 28, 38;
--primaryDisableCTAFill: #767676;
}

fieldset {
width: fit-content;
margin-top: 50px;
}
fieldset legend {
text-align: left;
font-size: 12px;
}
td {
color: white;
font-size: 14px;
border-radius: 5%;
display: table-cell;
text-align: initial;
margin: 5px 0;
width: max-content;
display: block;
}
label {
padding: 10px;
display: block;
cursor: pointer;
margin: 2px;
background: #4e545a;
border-radius: 10px;
}
input[type="radio"], input[type="checkbox"] {
margin-top: 0;
vertical-align: middle;
}

.initial td {
float: left;
margin: 2px;
}

fieldset {
display: inline-grid;
}

.action-button button {
padding: 6px;
cursor: pointer;
border: 2px solid #194880;
border-radius: 10px;
}

body.modal-manager-open {
overflow: hidden;
}

modal-manager[mode='closed'] {
display: none;
}
</style>
<script type="module" crossorigin src="assets/main.13ccd3d6.js"></script>
</head>

<body>
<ia-book-actions></ia-book-actions>



<div>
<fieldset>
<legend>Dev testing for book title bar</legend>
<table class="initial">
<tr>
<td class="titleBar">
<label><input type="checkbox" name="title" value="title" />Title Bar</label>
</td>
<td class="searchParam">
<label><input type="checkbox" name="search" value="Search Param" />Search Param</label>
</td>
<td>
<label class="ia-button"><button class="pageChangedEvent">Page Change Event</button></label>
</td>
</tr>
</table>
</fieldset>

<fieldset>
<legend>Dev testing for book action bar</legend>
<table class="initial">
<tr colspan='5'>
<td class="errorEnable"><label><input type="checkbox" name="errorEnable" value="errorEnable" />Do you want to see error response?</label></td>
</tr>
<tr>
<td class="userState">
<label><input type="checkbox" name="user" value="isAdmin" />isAdmin</label>
<label><input type="checkbox" name="user" value="isLoggedIn" />isLoggedIn</label>
</td>
<td class="printDisabled">
<label><input type="checkbox" name="is_printdisabled" value="is_printdisabled" />is_printdisabled</label>
<label><input type="checkbox" name="user_is_printdisabled" value="user_is_printdisabled" />user_is_printdisabled</label>
</td>
<td class="availableToBrowse">
<label><input type="radio" name="browse" value="available_to_browse" />available_to_browse</label>
<label><input type="radio" name="browse" value="user_has_browsed" />user_has_browsed</label>
<label><input type="radio" name="browse" value="browsingExpired" />browsingExpired</label>
</td>
<td class="availableToBorrow">
<label><input type="radio" name="borrow" value="available_to_borrow" />available_to_borrow</label>
<label><input type="radio" name="borrow" value="user_on_waitlist" />user_on_waitlist</label>
<label><input type="radio" name="borrow" value="user_can_claim_waitlist" />user_can_claim_waitlist</label>
<label><input type="radio" name="borrow" value="available_to_waitlist" />available_to_waitlist</label>
<label><input type="radio" name="borrow" value="user_has_borrowed" />user_has_borrowed</label>
</td>
<td class="purchase">
<label><input type="checkbox" name="purchase" value="purchase" />purchase</label>
</td>

<td class="reflect">
<input type="button" style="padding: 10px;
background: #194880;
color: white;
font-weight: bold; display: none" name="purchase" value="Reflect" />
</td>
</tr>
<tr>
<td>
<fieldset style="margin-top: 10px;">
<legend style="color: black;">controls for browsed book</legend>
<table aria-hidden="true">
<tbody><tr>
<td class="action-button">
<button id="show_warning_modal">When Browsing (`user_has_browsed`),<br> show Warning Modal</button>
</td>
<td class="action-button">
<button id="show_expired_modal">While Browsing (`user_has_browsed`),<br> Expire book & show its modal</button>
</td>
<td class="action-button">
<button id="resync_timer">While Browsing (`user_has_browsed`),<br> resync timer</button>
</td>
</tr>
</tbody></table>
</fieldset>
</td>
</tr>
</table>
</fieldset>
</div>
<modal-manager></modal-manager>
</body>
</html>
7 changes: 7 additions & 0 deletions ghpages/manifest.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"index.html": {
"file": "assets/main.13ccd3d6.js",
"src": "index.html",
"isEntry": true
}
}
Loading

0 comments on commit 5a6b03a

Please sign in to comment.