diff --git a/packages/logo-grid/README.md b/packages/logo-grid/README.md index 01680f0b4..4947332ba 100644 --- a/packages/logo-grid/README.md +++ b/packages/logo-grid/README.md @@ -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 diff --git a/packages/logo-grid/fragment.graphql b/packages/logo-grid/fragment.graphql index 4615497a9..0f9548dc9 100644 --- a/packages/logo-grid/fragment.graphql +++ b/packages/logo-grid/fragment.graphql @@ -11,8 +11,6 @@ fragment logoGridFields on SbcLogoGridRecord { monochromeLogo { ...imageFields } - integrationPage { - slug - } + integrationPageSlug } } diff --git a/packages/logo-grid/index.tsx b/packages/logo-grid/index.tsx index 86e805b7a..94cd38cee 100644 --- a/packages/logo-grid/index.tsx +++ b/packages/logo-grid/index.tsx @@ -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. */ @@ -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 @@ -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() { @@ -94,7 +91,7 @@ function LogoGrid({ // the hashicorp-www-next project. We should likely clarify this. diff --git a/packages/logo-grid/props.js b/packages/logo-grid/props.js index 69775c258..4397834dd 100644 --- a/packages/logo-grid/props.js +++ b/packages/logo-grid/props.js @@ -30,7 +30,7 @@ module.exports = { name: { type: 'string' }, description: { type: 'string' }, logo: { type: 'object', properties: image }, - integrationPage: { type: 'string' }, + integrationPageSlug: { type: 'string' }, }, }, ], @@ -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', }, }, @@ -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', @@ -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', @@ -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', @@ -135,20 +130,17 @@ 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', }, }, @@ -156,20 +148,17 @@ module.exports = { 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', }, }, @@ -177,7 +166,7 @@ module.exports = { name: 'MongoDB', description: 'MongoDB description.', link: '', - integrationPage: { slug: '' }, + integrationPageSlug: '', logo: { url: 'https://www.datocms-assets.com/2885/1506540175-color.svg', format: 'svg', @@ -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', @@ -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', @@ -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', @@ -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', @@ -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', }, }, @@ -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: {