-
Notifications
You must be signed in to change notification settings - Fork 4
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 #469 from ably/pubsub-required-fixes
[WEB-3878] 14.5.0 - ProductTile, shadows, secondary Icon colours, review builds
- Loading branch information
Showing
31 changed files
with
1,316 additions
and
332 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,31 @@ | ||
| name: Review | ||
|
|
||
| on: | ||
| pull_request: | ||
| types: [labeled] | ||
|
|
||
| permissions: | ||
| contents: read | ||
| pages: write | ||
| id-token: write | ||
|
|
||
| jobs: | ||
| deploy-storybook: | ||
| if: ${{ github.event.label.name == 'review' }} | ||
| name: Deploy Storybook to GH Pages | ||
| runs-on: ubuntu-latest | ||
| env: | ||
| NPM_TOKEN: ${{ secrets.NPM_TOKEN }} | ||
| REGISTRY_TOKEN: ${{ secrets.REGISTRY_TOKEN }} | ||
| steps: | ||
| - name: Checkout | ||
| uses: actions/checkout@v4 | ||
| - name: Build | ||
| run: yarn && yarn build-storybook | ||
| - name: Upload | ||
| uses: actions/upload-pages-artifact@v3.0.1 | ||
| with: | ||
| path: preview | ||
| - id: deploy | ||
| name: Deploy to GitHub Pages | ||
| uses: actions/deploy-pages@v4 |
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
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,4 @@ | ||
| export const defaultIconSecondaryColor = (name: string) => | ||
| ({ | ||
| "icon-gui-check-circled-fill": "white", | ||
| })[name]; |
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,63 @@ | ||
| import React from "react"; | ||
| import Icon from "./Icon"; | ||
| import FeaturedLink from "./FeaturedLink"; | ||
| import { ProductName, products } from "./ProductTile/data"; | ||
|
|
||
| type ProductTileProps = { | ||
| name: ProductName; | ||
| selected?: boolean; | ||
| currentPage?: boolean; | ||
| }; | ||
|
|
||
| const ProductTile = ({ name, selected, currentPage }: ProductTileProps) => { | ||
| const { icon, label, description, link, unavailable } = products[name] ?? {}; | ||
|
|
||
| return ( | ||
| <div | ||
| className={`rounded-lg p-12 flex flex-col gap-8 transition-colors ${selected ? "bg-neutral-300" : "bg-neutral-1200 hover:bg-neutral-1100"}`} | ||
| > | ||
| <div className="flex gap-12"> | ||
| {icon ? <Icon name={icon} size="48" /> : null} | ||
| <div | ||
| className={`flex ${unavailable ? "flex-row items-center gap-4" : "flex-col justify-center"} `} | ||
| > | ||
| <p | ||
| className={`${unavailable ? "ui-text-p2" : "ui-text-p3"} ${selected ? "text-neutral-800" : "text-neutral-500"} font-medium`} | ||
| > | ||
| Ably{" "} | ||
| </p> | ||
| <p | ||
| className={`ui-text-p2 ${selected ? "text-neutral-1300" : "text-neutral-300"} font-bold ${unavailable ? "" : "mt-[-3px]"}`} | ||
| > | ||
| {label} | ||
| </p> | ||
| </div> | ||
| </div> | ||
| {unavailable ? ( | ||
| <div className="-mt-8"> | ||
| <div className="table-cell bg-neutral-1000 rounded-full px-6 py-2 text-neutral-600 tracking-tighten-0.015 font-bold text-[8px] leading-snug"> | ||
| COMING SOON | ||
| </div> | ||
| </div> | ||
| ) : null} | ||
| <p | ||
| className={`ui-text-p3 ${selected ? "text-neutral-1000" : "text-neutral-700"} font-medium leading-snug`} | ||
| > | ||
| {description} | ||
| </p> | ||
| {selected && link ? ( | ||
| <FeaturedLink | ||
| additionalCSS={`ui-btn-secondary w-full hover:text-neutral-1300 mt-8 text-center inline-block ${ | ||
| selected ? "text-neutral-1300" : "text-white" | ||
| }`} | ||
| iconColor="text-orange-600" | ||
| url={link} | ||
| > | ||
| {currentPage ? "View docs" : "Explore"} | ||
| </FeaturedLink> | ||
| ) : null} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default ProductTile; |
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,49 @@ | ||
| import React from "react"; | ||
| import ProductTile from "../ProductTile"; | ||
| import { ProductName, products } from "../ProductTile/data"; | ||
|
|
||
| export default { | ||
| title: "JS Components/Product Tile", | ||
| component: ProductTile, | ||
| tags: ["autodocs"], | ||
| }; | ||
|
|
||
| export const ProductTiles = { | ||
| render: () => ( | ||
| <div className="grid sm:grid-cols-3 gap-32"> | ||
| {Object.keys(products).map((product) => ( | ||
| <ProductTile key={product} name={product as ProductName} /> | ||
| ))} | ||
| </div> | ||
| ), | ||
| parameters: { | ||
| docs: { | ||
| description: { | ||
| story: "Example usage: `<ProductTile name='pubsub' />`", | ||
| }, | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
| export const SelectedProductTiles = { | ||
| render: () => ( | ||
| <div className="grid grid-cols-3 gap-32"> | ||
| {Object.keys(products).map((product, index) => ( | ||
| <ProductTile | ||
| key={product} | ||
| name={product as ProductName} | ||
| selected={index % 2 === 0} | ||
| currentPage={index === 0} | ||
| /> | ||
| ))} | ||
| </div> | ||
| ), | ||
| parameters: { | ||
| docs: { | ||
| description: { | ||
| story: | ||
| "Demonstration of the odd tiles being 'selected'. The first tile is also marked as the `currentPage` (to simulate being on the Pubsub page), which alters the language of the CTA.", | ||
| }, | ||
| }, | ||
| }, | ||
| }; |
Oops, something went wrong.