From 4765b05f30835615ea7c474983f1e091d36afdfd Mon Sep 17 00:00:00 2001 From: Enio Moura Date: Wed, 26 Jul 2023 16:18:00 -0300 Subject: [PATCH] ButtonLink: new component forked from Button (#3093) --- docs/docs-components/data/components.js | 27 +++ docs/docs-components/siteIndex.js | 1 + .../roleLinkExample.js => buttonlink/main.js} | 6 +- .../relAndTargetExample.js | 5 +- docs/graphics/general/ButtonLink.svg | 23 +++ docs/pages/visual-test/ButtonLink-dark.js | 22 ++ docs/pages/visual-test/ButtonLink.js | 20 ++ docs/pages/web/button.js | 68 +++--- docs/pages/web/buttonlink.js | 88 ++++++++ packages/gestalt/src/ButtonLink.js | 194 ++++++++++++++++++ packages/gestalt/src/index.js | 2 + .../accessibility/web__buttonlink.spec.mjs | 8 + .../visual-test/ButtonLink-dark.spec.mjs | 8 + .../ButtonLink-dark-chromium-darwin.png | Bin 0 -> 3655 bytes playwright/visual-test/ButtonLink.spec.mjs | 8 + .../ButtonLink-chromium-darwin.png | Bin 0 -> 3754 bytes 16 files changed, 439 insertions(+), 41 deletions(-) rename docs/examples/{button/roleLinkExample.js => buttonlink/main.js} (81%) rename docs/examples/{button => buttonlink}/relAndTargetExample.js (84%) create mode 100644 docs/graphics/general/ButtonLink.svg create mode 100644 docs/pages/visual-test/ButtonLink-dark.js create mode 100644 docs/pages/visual-test/ButtonLink.js create mode 100644 docs/pages/web/buttonlink.js create mode 100644 packages/gestalt/src/ButtonLink.js create mode 100644 playwright/accessibility/web__buttonlink.spec.mjs create mode 100644 playwright/visual-test/ButtonLink-dark.spec.mjs create mode 100644 playwright/visual-test/ButtonLink-dark.spec.mjs-snapshots/ButtonLink-dark-chromium-darwin.png create mode 100644 playwright/visual-test/ButtonLink.spec.mjs create mode 100644 playwright/visual-test/ButtonLink.spec.mjs-snapshots/ButtonLink-chromium-darwin.png diff --git a/docs/docs-components/data/components.js b/docs/docs-components/data/components.js index 70f8591c4c..ad509b5693 100644 --- a/docs/docs-components/data/components.js +++ b/docs/docs-components/data/components.js @@ -20,6 +20,7 @@ import AvatarGroup from '../../graphics/general/AvatarGroup.svg'; import Badge from '../../graphics/general/Badge.svg'; import Button from '../../graphics/general/Button.svg'; import ButtonGroup from '../../graphics/general/ButtonGroup.svg'; +import ButtonLink from '../../graphics/general/ButtonLink.svg'; import Callout from '../../graphics/general/Callout.svg'; import Checkbox from '../../graphics/general/Checkbox.svg'; import Collage from '../../graphics/general/Collage.svg'; @@ -383,6 +384,32 @@ const componentData: $ReadOnlyArray = [ }, }, }, + { + id: 'ButtonLink', + platform: { + web: { + name: 'ButtonLink', + visual: { + svg: , + }, + description: 'ButtonLink allow users to use a surface action to link to another page.', + category: ['Actions'], + status: { + accessible: { + summary: 'ready', + a11yVisual: 'ready', + a11yScreenreader: 'ready', + a11yNavigation: 'ready', + a11yComprehension: 'ready', + }, + documentation: 'ready', + figmaStatus: 'notAvailable', + responsive: 'ready', + status: 'ready', + }, + }, + }, + }, { id: 'ButtonGroup', platform: { diff --git a/docs/docs-components/siteIndex.js b/docs/docs-components/siteIndex.js index b452799c79..8b3f8dd021 100644 --- a/docs/docs-components/siteIndex.js +++ b/docs/docs-components/siteIndex.js @@ -110,6 +110,7 @@ const siteIndex: $ReadOnlyArray = [ 'Badge', 'Box', 'Button', + 'ButtonLink', 'ButtonGroup', 'Callout', 'Checkbox', diff --git a/docs/examples/button/roleLinkExample.js b/docs/examples/buttonlink/main.js similarity index 81% rename from docs/examples/button/roleLinkExample.js rename to docs/examples/buttonlink/main.js index bcf0dd4a2b..9e306437bd 100644 --- a/docs/examples/button/roleLinkExample.js +++ b/docs/examples/buttonlink/main.js @@ -1,16 +1,16 @@ // @flow strict import { type Node } from 'react'; -import { Button, Flex } from 'gestalt'; +import { ButtonLink, Flex } from 'gestalt'; export default function Example(): Node { return ( -