From a1ab2a2cc70f9d9fbb3c9ce44f8f69c3be36f9af Mon Sep 17 00:00:00 2001 From: Sarka Chwastkova Date: Thu, 26 Sep 2024 15:56:08 +0200 Subject: [PATCH] chore(TextLink): migrate from CSF2 to CSF3 --- .../src/TextLink/TextLink.stories.tsx | 360 +++++++----------- 1 file changed, 135 insertions(+), 225 deletions(-) diff --git a/packages/orbit-components/src/TextLink/TextLink.stories.tsx b/packages/orbit-components/src/TextLink/TextLink.stories.tsx index 7d0a9a6e70..1107dd85d1 100644 --- a/packages/orbit-components/src/TextLink/TextLink.stories.tsx +++ b/packages/orbit-components/src/TextLink/TextLink.stories.tsx @@ -1,8 +1,8 @@ import * as React from "react"; +import type { Meta, StoryObj } from "@storybook/react"; import { action } from "@storybook/addon-actions"; import { TYPE_OPTIONS, SIZE_OPTIONS } from "./consts"; -import { TYPE_OPTIONS as TEXT_TYPES } from "../Text/consts"; import * as Icons from "../icons"; import Text from "../Text"; import Box from "../Box"; @@ -10,283 +10,193 @@ import RenderInRtl from "../utils/rtl/RenderInRtl"; import TextLink from "."; -const validate = (rel: string) => (rel !== undefined && rel !== "" ? rel : undefined); +const validate = (rel: string) => (rel !== "" ? rel : undefined); -const getIcon = (source: string | null) => source && Icons[source]; +const getIcon = (source: string) => Icons[source]; -export default { - title: "TextLink", -}; +Box.displayName = "Box"; -export const PrimaryLink = ({ href, external, children }) => { - return ( - - {children} - - ); -}; +const meta: Meta = { + title: "TextLink", + component: TextLink, -PrimaryLink.story = { - name: "Primary link", + args: { + children: "Link text", + href: "https://kiwi.com", + onClick: action("onClick"), + }, parameters: { - info: "Text links are used in paragraphs when part of the text needs to be actionable. It inherits the visual style of the parent paragraph. Visit Orbit.Kiwi for more detailed guidelines.", + info: "TextLink component. Check Orbit.Kiwi for more detailed guidelines.", + controls: { + exclude: ["onClick", "type", "external", "asComponent", "stopPropagation"], + }, }, }; -PrimaryLink.args = { - href: "https://kiwi.com", - external: false, - children: "Primary link", -}; +export default meta; -export const SecondaryLink = ({ href, external, children }) => { - return ( - - {children} - - ); -}; +type Story = StoryObj; -SecondaryLink.story = { - name: "Secondary link", +export const Default: Story = { + render: ({ children, ...args }) => {children}, parameters: { - info: "Text links are used in paragraphs when part of the text needs to be actionable. It inherits the visual style of the parent paragraph. Visit Orbit.Kiwi for more detailed guidelines.", + info: "Default configuration of TextLink component. Check Orbit.Kiwi for more detailed guidelines.", }, }; -SecondaryLink.args = { - href: "https://kiwi.com", - external: false, - children: "Secondary link", -}; - -export const LinkWithLeftIcon = ({ href, children, icon }) => { - const Icon = getIcon(icon); - - return ( - } standAlone> - {children} - - ); -}; +export const LinkWithLeftIcon: Story = { + render: ({ children, iconLeft, ...args }) => { + const Icon = typeof iconLeft === "string" && getIcon(iconLeft); -LinkWithLeftIcon.story = { - name: "Link with left icon", - - parameters: { - info: "Text links are used in paragraphs when part of the text needs to be actionable. It inherits the visual style of the parent paragraph. Visit Orbit.Kiwi for more detailed guidelines.", + return ( + }> + {children} + + ); }, -}; -LinkWithLeftIcon.args = { - href: "https://kiwi.com", - children: "TextLink with icon", - icon: "ChevronBackward", -}; + args: { + iconLeft: "ChevronBackward", + }, -LinkWithLeftIcon.argTypes = { - icon: { - options: Object.keys(Icons), - control: { - type: "select", + argTypes: { + iconLeft: { + options: [undefined, ...Object.keys(Icons)], + control: { + type: "select", + }, }, }, }; -export const LinkWithRightIcon = ({ href, children, icon }) => { - const Icon = getIcon(icon); - - return ( - }> - {children} - - ); -}; - -LinkWithRightIcon.story = { - name: "Link with right icon", +export const LinkWithRightIcon: Story = { + render: ({ children, iconRight, ...args }) => { + const Icon = typeof iconRight === "string" && getIcon(iconRight); - parameters: { - info: "Text links are used in paragraphs when part of the text needs to be actionable. It inherits the visual style of the parent paragraph. Visit Orbit.Kiwi for more detailed guidelines.", + return ( + }> + {children} + + ); }, -}; -LinkWithRightIcon.args = { - href: "https://kiwi.com", - children: "TextLink with icon", - icon: "ChevronForward", -}; + args: { + iconRight: "ChevronForward", + }, -LinkWithRightIcon.argTypes = { - icon: { - options: Object.keys(Icons), - control: { - type: "select", + argTypes: { + iconRight: { + ...LinkWithLeftIcon.argTypes?.iconLeft, }, }, }; -export const Playground = ({ - href, - type, - size, - external, - children, - rel, - iconRight, - iconLeft, - dataTest, - tabIndex, - stopPropagation, - standAlone, - noUnderline, -}) => { - const IconRight = getIcon(iconRight); - const IconLeft = getIcon(iconLeft); - return ( - - } - iconLeft={IconLeft && } - dataTest={dataTest} - tabIndex={tabIndex} - stopPropagation={stopPropagation} - standAlone={standAlone} - noUnderline={noUnderline} - > - {children} - - - ); -}; - -Playground.story = { - parameters: { - info: "You can try all possible configurations of this component. However, check Orbit.Kiwi for more detailed design guidelines.", +export const TextLinkInText: Story = { + render: ({ children, ...args }) => { + return ( + + Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dapibus fermentum ipsum. + Duis ante orci, molestie vitae vehicula venenatis, tincidunt ac pede.{" "} + {children}, fermentum vitae, sagittis id, malesuada in, quam. + Vivamus luctus egestas leo. Integer imperdiet lectus quis justo. Duis condimentum augue id + magna semper rutrum. Quisque porta. Sed elit dui, pellentesque a, faucibus vel, interdum + nec, diam. + + ); }, -}; - -Playground.args = { - href: "https://kiwi.com", - type: TYPE_OPTIONS.SECONDARY, - size: SIZE_OPTIONS.SMALL, - external: true, - children: "Custom link", - rel: "", - iconRight: "ChevronForward", - iconLeft: "", - dataTest: "test", - tabIndex: "", - stopPropagation: false, - standAlone: false, - noUnderline: false, -}; -Playground.argTypes = { - type: { - options: Object.values(TYPE_OPTIONS), - control: { - type: "select", + parameters: { + info: "An example of usage of TextLink in Text component. Check Orbit.Kiwi for more detailed guidelines.", + controls: { + exclude: ["onClick", "external", "asComponent", "stopPropagation"], }, }, - size: { - options: Object.values(SIZE_OPTIONS), - control: { - type: "select", - }, + + args: { + type: TYPE_OPTIONS.SUCCESS, + size: SIZE_OPTIONS.SMALL, + standAlone: false, + noUnderline: false, }, - iconRight: { - options: Object.keys(Icons), - control: { - type: "select", + + argTypes: { + type: { + options: Object.values(TYPE_OPTIONS), + control: { + type: "select", + }, }, - }, - iconLeft: { - options: Object.keys(Icons), - control: { - type: "select", + size: { + options: [undefined, ...Object.values(SIZE_OPTIONS)], + control: { + type: "select", + }, }, }, }; -export const TextLinkInText = ({ type }) => { - return ( - - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dapibus fermentum ipsum. Duis - ante orci, molestie vitae vehicula venenatis, tincidunt ac pede.{" "} - - Etiam dui sem - - , fermentum vitae, sagittis id, malesuada in, quam. Vivamus luctus egestas leo. Integer - imperdiet lectus quis justo. Duis condimentum augue id magna semper rutrum. Quisque porta. Sed - elit dui, pellentesque a, faucibus vel, interdum nec, diam. - - ); -}; - -TextLinkInText.story = { - name: "TextLink inside paragraph", - parameters: { - info: "It inherits the visual style of the parent paragraph. Visit Orbit.Kiwi for more detailed guidelines.", +export const Playground: Story = { + render: ({ rel, type, children, iconRight, iconLeft, ...args }) => { + const IconRight = typeof iconRight === "string" && getIcon(iconRight); + const IconLeft = typeof iconLeft === "string" && getIcon(iconLeft); + + return ( + + } + iconLeft={IconLeft && } + > + {children} + + + ); }, -}; - -TextLinkInText.args = { - type: TEXT_TYPES.CRITICAL, -}; -TextLinkInText.argTypes = { - type: { - options: Object.values(TEXT_TYPES), - control: { - type: "select", - }, + args: { + ...LinkWithLeftIcon.args, + ...LinkWithRightIcon.args, + ...TextLinkInText.args, + external: true, + rel: "", + tabIndex: "", + stopPropagation: false, + title: "link title", + ariaCurrent: "text-link", + id: "link-id", }, -}; -export const Accessibility = ({ children, title }) => { - return ( - - {children} - - ); -}; + argTypes: { + ...LinkWithLeftIcon.argTypes, + ...LinkWithRightIcon.argTypes, + ...TextLinkInText.argTypes, + }, -Accessibility.story = { parameters: { - info: "You can try all possible configurations of this component. However, check Orbit.Kiwi for more detailed design guidelines.", + info: "Playground of TextLink component. Check Orbit.Kiwi for more detailed guidelines.", + controls: { + exclude: ["onClick", "asComponent"], + }, }, }; -Accessibility.args = { - children: "Primary link", - title: "Clarify purpose of a link for screen readers", -}; - -export const Rtl = () => ( - - }> - Link - - -); - -Rtl.story = { - name: "RTL", +export const Rtl: Story = { + render: args => ( + + }> + Link + + + ), parameters: { info: "This is a preview of this component in RTL setup.", + controls: { + disable: true, + }, }, };