Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore: replace integrationPage with new fields #1018

Closed
wants to merge 1 commit into from
Closed

chore: replace integrationPage with new fields #1018

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/logo-grid/README.md
View file
Open in desktop
Expand Up @@ -8,13 +8,13 @@ A grid showcasing company logos
- `color` (str) [default='color'] - can also be 'monochrome' or 'white'
- `details` (bool) - creates a popup with company details when clicked if true
- `hash-url` (bool) - hashes the url with the company slug when clicked if true
- `integration-link` (bool) - links to integration page (if available - see `data.integrationPage`)
- `integration-link` (bool) - links to integration page (if available - see `data.integrationPageSlug`)
- `data` (arr) - array of companies
- `name` (str) - Company name
- `logo` (obj) - object with a url prop linking to the image
- `description` (str) - markdown enabled description
- `link` (str) - link to the company's website
- `integrationPage` (obj) - an integration page
- `integrationPageSlug` (str) - a link to an integration page

### Dependents

Expand Down
4 changes: 1 addition & 3 deletions packages/logo-grid/fragment.graphql
View file
Open in desktop
Expand Up @@ -11,8 +11,6 @@ fragment logoGridFields on SbcLogoGridRecord {
monochromeLogo {
...imageFields
}
integrationPage {
slug
}
integrationPageSlug
}
}
11 changes: 4 additions & 7 deletions packages/logo-grid/index.tsx
View file
Open in desktop
Expand Up @@ -26,10 +26,7 @@ export interface LogoGridCompany {
/** Short description of what the company offers */
description?: string
/** Optional integration page to link to. */
integrationPage?: {
/** Slug to link to, to be constructed into a `.com/integrations/{slug}` url. */
slug: string
}
integrationPageSlug?: string
/** Company website address. */
link?: string
/** Color logo image. */
Expand All @@ -49,7 +46,7 @@ interface LogoGridProps {
color?: 'color' | 'white' | 'monochrome'
/** If true, when a logo with a company.description is clicked, a tooltip-style dialog that links to the company website will be shown. */
details?: boolean
/** If true, links to integration pages are enabled. If an item has a valid `data.integrationPage` property, the logo grid item will be linked. If grid items have both a link and a tooltip, only the link will be used. */
/** If true, links to integration pages are enabled. If an item has a valid `data.integrationPageSlug` property, the logo grid item will be linked. If grid items have both a link and a tooltip, only the link will be used. */
integrationLink?: boolean
/** If true, borders around logo items will be removed. */
removeBorders?: boolean
Expand All @@ -75,7 +72,7 @@ function LogoGrid({
{data.map((company) => {
// What we wrap the TileImage in within the tile
// varies on whether we need a link or tooltip
const hasLink = integrationLink && company.integrationPage
const hasLink = integrationLink && company.integrationPageSlug
const hasTooltip = details && company.description
// Configure the company logo for clarity in conditional rendering
function TileImage() {
Expand All @@ -94,7 +91,7 @@ function LogoGrid({
// the hashicorp-www-next project. We should likely clarify this.
<a
className={s.tileClickable}
href={`/integrations/${company.integrationPage!.slug}`}
href={`/integrations/${company.integrationPageSlug}`}
>
<TileImage />
</a>
Expand Down
72 changes: 29 additions & 43 deletions packages/logo-grid/props.js
View file
Open in desktop
Expand Up @@ -30,7 +30,7 @@ module.exports = {
name: { type: 'string' },
description: { type: 'string' },
logo: { type: 'object', properties: image },
integrationPage: { type: 'string' },
integrationPageSlug: { type: 'string' },
},
},
],
Expand All @@ -40,20 +40,17 @@ module.exports = {
description:
'Gloo provides all the tools needed to glue together traditional and cloud-native apps.',
link: '',
integrationPage: { slug: '' },
integrationPageSlug: '',
logo: {
url:
'https://www.datocms-assets.com/2885/1531117610-sknnx4wk400x4002.svg',
url: 'https://www.datocms-assets.com/2885/1531117610-sknnx4wk400x4002.svg',
format: 'svg',
},
monochromeLogo: {
url:
'https://www.datocms-assets.com/2885/1531120298-sknnx4wk400x400black.svg',
url: 'https://www.datocms-assets.com/2885/1531120298-sknnx4wk400x400black.svg',
format: 'svg',
},
whiteLogo: {
url:
'https://www.datocms-assets.com/2885/1531120304-sknnx4wk400x400white.svg',
url: 'https://www.datocms-assets.com/2885/1531120304-sknnx4wk400x400white.svg',
format: 'svg',
},
},
Expand All @@ -62,26 +59,24 @@ module.exports = {
description:
'PostgreSQL is a powerful, open source object-relational database system.',
link: '',
integrationPage: { slug: '' },
integrationPageSlug: '',
logo: {
url: 'https://www.datocms-assets.com/2885/1539818112-postgresql.svg',
format: 'svg',
},
monochromeLogo: {
url:
'https://www.datocms-assets.com/2885/1539818117-postgresql-black.svg',
url: 'https://www.datocms-assets.com/2885/1539818117-postgresql-black.svg',
format: 'svg',
},
whiteLogo: {
url:
'https://www.datocms-assets.com/2885/1539818125-postgresql-white.svg',
url: 'https://www.datocms-assets.com/2885/1539818125-postgresql-white.svg',
format: 'svg',
},
},
{
name: 'AA Cloud',
link: '',
integrationPage: { slug: '' },
integrationPageSlug: '',
logo: {
url: 'https://www.datocms-assets.com/2885/1520536519-aa-cloud.png',
format: 'png',
Expand All @@ -99,7 +94,7 @@ module.exports = {
name: 'Cumulus Technologies',
description: 'Cumulus Technologies description.',
link: '',
integrationPage: { slug: '' },
integrationPageSlug: '',
logo: {
url: 'https://www.datocms-assets.com/2885/1519150128-kumulus.jpg',
format: 'jpg',
Expand All @@ -117,7 +112,7 @@ module.exports = {
name: 'Magentys',
description: 'Magentys description.',
link: '',
integrationPage: { slug: '' },
integrationPageSlug: '',
logo: {
url: 'https://www.datocms-assets.com/2885/1520536829-magentys.png',
format: 'png',
Expand All @@ -135,49 +130,43 @@ module.exports = {
name: 'AWS',
description: 'AWS description.',
link: '',
integrationPage: { slug: '' },
integrationPageSlug: '',
logo: {
url:
'https://www.datocms-assets.com/2885/1510033601-aws_logo_rgb_fullcolor.svg',
url: 'https://www.datocms-assets.com/2885/1510033601-aws_logo_rgb_fullcolor.svg',
format: 'svg',
},
monochromeLogo: {
url:
'https://www.datocms-assets.com/2885/1510033601-aws_logo_rgb_blk.svg',
url: 'https://www.datocms-assets.com/2885/1510033601-aws_logo_rgb_blk.svg',
format: 'svg',
},
whiteLogo: {
url:
'https://www.datocms-assets.com/2885/1510033601-aws_logo_rgb_wht.svg',
url: 'https://www.datocms-assets.com/2885/1510033601-aws_logo_rgb_wht.svg',
format: 'svg',
},
},
{
name: 'Azure',
description: 'Azure description.',
link: '',
integrationPage: { slug: '' },
integrationPageSlug: '',
logo: {
url:
'https://www.datocms-assets.com/2885/1539799149-azure-stacked-color.svg',
url: 'https://www.datocms-assets.com/2885/1539799149-azure-stacked-color.svg',
format: 'svg',
},
monochromeLogo: {
url:
'https://www.datocms-assets.com/2885/1539799149-azure-stacked-black.svg',
url: 'https://www.datocms-assets.com/2885/1539799149-azure-stacked-black.svg',
format: 'svg',
},
whiteLogo: {
url:
'https://www.datocms-assets.com/2885/1539799149-azure-stacked-white.svg',
url: 'https://www.datocms-assets.com/2885/1539799149-azure-stacked-white.svg',
format: 'svg',
},
},
{
name: 'MongoDB',
description: 'MongoDB description.',
link: '',
integrationPage: { slug: '' },
integrationPageSlug: '',
logo: {
url: 'https://www.datocms-assets.com/2885/1506540175-color.svg',
format: 'svg',
Expand All @@ -195,7 +184,7 @@ module.exports = {
name: 'Wide Placeholder',
description: 'Wide Placeholder description.',
link: '',
integrationPage: { slug: '' },
integrationPageSlug: '',
logo: {
url: 'http://placehold.it/600x100.png',
format: 'png',
Expand All @@ -213,7 +202,7 @@ module.exports = {
name: 'Tall Placeholder',
description: 'Tall Placeholder description.',
link: '',
integrationPage: { slug: '' },
integrationPageSlug: '',
logo: {
url: 'http://placehold.it/100x600.png',
format: 'png',
Expand All @@ -231,7 +220,7 @@ module.exports = {
name: 'Square Placeholder',
description: 'Square Placeholder description.',
link: '',
integrationPage: { slug: '' },
integrationPageSlug: '',
logo: {
url: 'http://placehold.it/100x100.png',
format: 'png',
Expand All @@ -249,7 +238,7 @@ module.exports = {
name: 'Tiny Placeholder',
description: 'Tiny Placeholder description.',
link: '',
integrationPage: { slug: '' },
integrationPageSlug: '',
logo: {
url: 'http://placehold.it/20x20.png',
format: 'png',
Expand All @@ -267,20 +256,17 @@ module.exports = {
name: 'AWS with Integration Link',
description: 'AWS with Integration Link description.',
link: '',
integrationPage: { slug: 'aws' },
integrationPageSlug: 'aws',
logo: {
url:
'https://www.datocms-assets.com/2885/1510033601-aws_logo_rgb_fullcolor.svg',
url: 'https://www.datocms-assets.com/2885/1510033601-aws_logo_rgb_fullcolor.svg',
format: 'svg',
},
monochromeLogo: {
url:
'https://www.datocms-assets.com/2885/1510033601-aws_logo_rgb_blk.svg',
url: 'https://www.datocms-assets.com/2885/1510033601-aws_logo_rgb_blk.svg',
format: 'svg',
},
whiteLogo: {
url:
'https://www.datocms-assets.com/2885/1510033601-aws_logo_rgb_wht.svg',
url: 'https://www.datocms-assets.com/2885/1510033601-aws_logo_rgb_wht.svg',
format: 'svg',
},
},
Expand Down Expand Up @@ -313,7 +299,7 @@ module.exports = {
integrationLink: {
type: 'boolean',
description:
'If true, links to integration pages are enabled if an item has a valid `data.integrationPage` property. It will override `details` if true',
'If true, links to integration pages are enabled if an item has a valid `data.integrationPageSlug` property. It will override `details` if true',
control: { type: 'checkbox', value: false },
},
details: {
Expand Down