From 978ef8715e7badabbe3099cea4c253e0a458c767 Mon Sep 17 00:00:00 2001 From: jedwoj Date: Mon, 20 Nov 2023 00:19:04 +0100 Subject: [PATCH 1/4] Initial structure built --- .../libs/figa-ui/src/lib/bar/bar.stories.tsx | 2 +- .../figa-ui/src/lib/expandable-link/defs.ts | 26 +++++ .../expandable-link.stories.tsx | 28 ++++++ .../expandable-link/expandable-link.test.tsx | 0 .../lib/expandable-link/expandable-link.tsx | 97 +++++++++++++++++++ .../figa-ui/src/lib/expandable-link/index.ts | 1 + 6 files changed, 153 insertions(+), 1 deletion(-) create mode 100644 system/libs/figa-ui/src/lib/expandable-link/defs.ts create mode 100644 system/libs/figa-ui/src/lib/expandable-link/expandable-link.stories.tsx create mode 100644 system/libs/figa-ui/src/lib/expandable-link/expandable-link.test.tsx create mode 100644 system/libs/figa-ui/src/lib/expandable-link/expandable-link.tsx create mode 100644 system/libs/figa-ui/src/lib/expandable-link/index.ts diff --git a/system/libs/figa-ui/src/lib/bar/bar.stories.tsx b/system/libs/figa-ui/src/lib/bar/bar.stories.tsx index 0a5b8a5b5..f2b787829 100644 --- a/system/libs/figa-ui/src/lib/bar/bar.stories.tsx +++ b/system/libs/figa-ui/src/lib/bar/bar.stories.tsx @@ -1,6 +1,6 @@ import type { Story, Meta } from '@storybook/react'; -import { Bar } from './Bar'; +import { Bar } from './bar'; import type { BarProps } from './defs'; import { Button } from '../button'; import { ArrowTopIcon, CloseIcon } from '../icon'; diff --git a/system/libs/figa-ui/src/lib/expandable-link/defs.ts b/system/libs/figa-ui/src/lib/expandable-link/defs.ts new file mode 100644 index 000000000..9dc726123 --- /dev/null +++ b/system/libs/figa-ui/src/lib/expandable-link/defs.ts @@ -0,0 +1,26 @@ +import type { ReactNode } from 'react'; + +type DefaultComponentProps = { + children: ReactNode; + className?: string; +}; + +interface ExpandableLinkProps extends DefaultComponentProps {} + +interface ExpandableLinkItemProps extends DefaultComponentProps {} + +interface ExpandableLinkBaseProps extends DefaultComponentProps { + isActive: boolean; +} + +interface ExpandableLinkListProps + extends Omit { + children: ReactNode[]; +} + +export type { + ExpandableLinkProps, + ExpandableLinkItemProps, + ExpandableLinkBaseProps, + ExpandableLinkListProps, +}; diff --git a/system/libs/figa-ui/src/lib/expandable-link/expandable-link.stories.tsx b/system/libs/figa-ui/src/lib/expandable-link/expandable-link.stories.tsx new file mode 100644 index 000000000..59fe1570a --- /dev/null +++ b/system/libs/figa-ui/src/lib/expandable-link/expandable-link.stories.tsx @@ -0,0 +1,28 @@ +import type { Story, Meta } from '@storybook/react'; + +import { ExpandableLink } from './expandable-link'; +import { Box } from '../box'; + +export default { + component: ExpandableLink, + title: 'ExpandableLink', +} as Meta; + +const Template: Story = () => { + return ( + + + + Name of the section + + + Link nr 1 + Link nr 2 + + + + ); +}; + +export const Default = Template.bind({}); +Default.args = {}; diff --git a/system/libs/figa-ui/src/lib/expandable-link/expandable-link.test.tsx b/system/libs/figa-ui/src/lib/expandable-link/expandable-link.test.tsx new file mode 100644 index 000000000..e69de29bb diff --git a/system/libs/figa-ui/src/lib/expandable-link/expandable-link.tsx b/system/libs/figa-ui/src/lib/expandable-link/expandable-link.tsx new file mode 100644 index 000000000..edc6243dd --- /dev/null +++ b/system/libs/figa-ui/src/lib/expandable-link/expandable-link.tsx @@ -0,0 +1,97 @@ +import styled from 'styled-components'; +import type { + ExpandableLinkProps, + ExpandableLinkItemProps, + ExpandableLinkBaseProps, + ExpandableLinkListProps, +} from './defs'; +import c from 'classnames'; +import { column, size } from '../shared'; +import { tokens } from '../theme-provider'; +import { ListItem } from '../list'; +import { Link } from '../link'; + +const Container = styled.section` + ${column()} + user-select: none; + + .expandable-link-name { + cursor: pointer; + width: fit-content; + padding: ${tokens.spacing[400]} ${tokens.spacing[300]}; + position: relative; + background-color: ${(props) => props.theme.box.filled.bg}; + + &:hover { + color: ${(props) => props.theme.font.primary.color}; + } + + &--active { + &::after { + content: ''; + position: absolute; + left: 0; + bottom: 0; + ${size(tokens.spacing[50], '100%')}; + background-color: ${(props) => props.theme.outline.color}; + } + } + } + + .expandable-link-list-item { + cursor: pointer; + background-color: ${(props) => props.theme.box.filled.bg}; + padding: ${tokens.spacing[100]} ${tokens.spacing[200]}; + + &:hover span { + color: ${(props) => props.theme.font.primary.color}; + } + } +`; + +const ExpandableLinkBase = ({ + className, + children, + isActive, +}: ExpandableLinkBaseProps) => { + return ( + + {children} + + ); +}; + +const ExpandableLinkItem = ({ + children, + className, +}: ExpandableLinkItemProps) => { + return ( + + {children} + + ); +}; + +const ExpandableLinkList = ({ + className, + children, +}: ExpandableLinkListProps) => { + return ; +}; + +const ExpandableLink = ({ className, children }: ExpandableLinkProps) => { + return {children}; +}; + +ExpandableLink.Base = ExpandableLinkBase; +ExpandableLink.List = ExpandableLinkList; +ExpandableLink.Item = ExpandableLinkItem; + +export { ExpandableLink }; diff --git a/system/libs/figa-ui/src/lib/expandable-link/index.ts b/system/libs/figa-ui/src/lib/expandable-link/index.ts new file mode 100644 index 000000000..24277ce34 --- /dev/null +++ b/system/libs/figa-ui/src/lib/expandable-link/index.ts @@ -0,0 +1 @@ +export * from './expandable-link'; \ No newline at end of file From a7815a0d686212bd27917672eb546ec6a6bc1780 Mon Sep 17 00:00:00 2001 From: jedwoj Date: Mon, 20 Nov 2023 01:24:45 +0100 Subject: [PATCH 2/4] Adjusted styling for displaying nearby other content --- .../figa-ui/src/lib/expandable-link/defs.ts | 8 ++-- .../expandable-link.stories.tsx | 48 +++++++++++++++---- .../lib/expandable-link/expandable-link.tsx | 36 +++++++++++--- 3 files changed, 73 insertions(+), 19 deletions(-) diff --git a/system/libs/figa-ui/src/lib/expandable-link/defs.ts b/system/libs/figa-ui/src/lib/expandable-link/defs.ts index 9dc726123..6894731df 100644 --- a/system/libs/figa-ui/src/lib/expandable-link/defs.ts +++ b/system/libs/figa-ui/src/lib/expandable-link/defs.ts @@ -7,9 +7,11 @@ type DefaultComponentProps = { interface ExpandableLinkProps extends DefaultComponentProps {} -interface ExpandableLinkItemProps extends DefaultComponentProps {} +interface ExpandableLinkItemProps extends DefaultComponentProps { + path: string; +} -interface ExpandableLinkBaseProps extends DefaultComponentProps { +interface ExpandableLinkNameProps extends DefaultComponentProps { isActive: boolean; } @@ -21,6 +23,6 @@ interface ExpandableLinkListProps export type { ExpandableLinkProps, ExpandableLinkItemProps, - ExpandableLinkBaseProps, + ExpandableLinkNameProps, ExpandableLinkListProps, }; diff --git a/system/libs/figa-ui/src/lib/expandable-link/expandable-link.stories.tsx b/system/libs/figa-ui/src/lib/expandable-link/expandable-link.stories.tsx index 59fe1570a..ce7942708 100644 --- a/system/libs/figa-ui/src/lib/expandable-link/expandable-link.stories.tsx +++ b/system/libs/figa-ui/src/lib/expandable-link/expandable-link.stories.tsx @@ -11,15 +11,45 @@ export default { const Template: Story = () => { return ( - - - Name of the section - - - Link nr 1 - Link nr 2 - - +
+ + Inputs + + + Empty Input + + + Filled Input + + + + + Inputs + + + Empty Input + + + Filled Input + + + +
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam + molestiae provident, reprehenderit molestias rem veritatis deleniti, + cupiditate quisquam fugit repellendus adipisci explicabo blanditiis? + Ullam ratione repellat nostrum nulla! Dignissimos ducimus accusamus + repudiandae similique. Fugiat maxime non aspernatur inventore, + assumenda, modi unde rerum dolore cupiditate nobis dicta rem fuga + molestiae recusandae fugit. Eligendi repellendus adipisci recusandae + laudantium, consequatur dolorem veniam quisquam praesentium autem, + reprehenderit ullam exercitationem vel vero ex accusantium cum + repudiandae ducimus, minus dolor. Ipsa ad iste atque, maxime quod + laboriosam dolorem cum pariatur ullam repellendus eveniet impedit + recusandae, officiis neque aliquam excepturi dicta? Quasi, neque! Fuga + deserunt consequuntur aut. +
); }; diff --git a/system/libs/figa-ui/src/lib/expandable-link/expandable-link.tsx b/system/libs/figa-ui/src/lib/expandable-link/expandable-link.tsx index edc6243dd..292e4b3db 100644 --- a/system/libs/figa-ui/src/lib/expandable-link/expandable-link.tsx +++ b/system/libs/figa-ui/src/lib/expandable-link/expandable-link.tsx @@ -2,7 +2,7 @@ import styled from 'styled-components'; import type { ExpandableLinkProps, ExpandableLinkItemProps, - ExpandableLinkBaseProps, + ExpandableLinkNameProps, ExpandableLinkListProps, } from './defs'; import c from 'classnames'; @@ -14,16 +14,31 @@ import { Link } from '../link'; const Container = styled.section` ${column()} user-select: none; + position: relative; + + .expandable-link-list { + position: absolute; + top: 100%; + left: 0; + visibility: hidden; + white-space: nowrap; + + &:hover { + visibility: visible; + } + } .expandable-link-name { cursor: pointer; width: fit-content; padding: ${tokens.spacing[400]} ${tokens.spacing[300]}; - position: relative; background-color: ${(props) => props.theme.box.filled.bg}; &:hover { color: ${(props) => props.theme.font.primary.color}; + & + .expandable-link-list { + visibility: visible; + } } &--active { @@ -43,17 +58,21 @@ const Container = styled.section` background-color: ${(props) => props.theme.box.filled.bg}; padding: ${tokens.spacing[100]} ${tokens.spacing[200]}; - &:hover span { + & a { + text-decoration: none; + } + + &:hover a { color: ${(props) => props.theme.font.primary.color}; } } `; -const ExpandableLinkBase = ({ +const ExpandableLinkName = ({ className, children, isActive, -}: ExpandableLinkBaseProps) => { +}: ExpandableLinkNameProps) => { return ( { return ( - {children} + + {children} + ); }; @@ -90,7 +112,7 @@ const ExpandableLink = ({ className, children }: ExpandableLinkProps) => { return {children}; }; -ExpandableLink.Base = ExpandableLinkBase; +ExpandableLink.Name = ExpandableLinkName; ExpandableLink.List = ExpandableLinkList; ExpandableLink.Item = ExpandableLinkItem; From 376bb64844e8987b6bbb8675de438aafd43ea59e Mon Sep 17 00:00:00 2001 From: jedwoj Date: Tue, 21 Nov 2023 01:15:02 +0100 Subject: [PATCH 3/4] Added snapshot test --- .../expandable-link.test.tsx.snap | 46 +++++++++++++++++++ .../expandable-link.stories.tsx | 26 ----------- .../expandable-link/expandable-link.test.tsx | 34 ++++++++++++++ .../lib/expandable-link/expandable-link.tsx | 13 ++++-- 4 files changed, 88 insertions(+), 31 deletions(-) create mode 100644 system/libs/figa-ui/src/lib/expandable-link/__snapshots__/expandable-link.test.tsx.snap diff --git a/system/libs/figa-ui/src/lib/expandable-link/__snapshots__/expandable-link.test.tsx.snap b/system/libs/figa-ui/src/lib/expandable-link/__snapshots__/expandable-link.test.tsx.snap new file mode 100644 index 000000000..4c4ba2844 --- /dev/null +++ b/system/libs/figa-ui/src/lib/expandable-link/__snapshots__/expandable-link.test.tsx.snap @@ -0,0 +1,46 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Exapndable link can be used when: [FRAGILE] assigns class names for particular nodes 1`] = ` + + + +`; diff --git a/system/libs/figa-ui/src/lib/expandable-link/expandable-link.stories.tsx b/system/libs/figa-ui/src/lib/expandable-link/expandable-link.stories.tsx index ce7942708..a9b2c7450 100644 --- a/system/libs/figa-ui/src/lib/expandable-link/expandable-link.stories.tsx +++ b/system/libs/figa-ui/src/lib/expandable-link/expandable-link.stories.tsx @@ -23,32 +23,6 @@ const Template: Story = () => { - - Inputs - - - Empty Input - - - Filled Input - - - - -
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam - molestiae provident, reprehenderit molestias rem veritatis deleniti, - cupiditate quisquam fugit repellendus adipisci explicabo blanditiis? - Ullam ratione repellat nostrum nulla! Dignissimos ducimus accusamus - repudiandae similique. Fugiat maxime non aspernatur inventore, - assumenda, modi unde rerum dolore cupiditate nobis dicta rem fuga - molestiae recusandae fugit. Eligendi repellendus adipisci recusandae - laudantium, consequatur dolorem veniam quisquam praesentium autem, - reprehenderit ullam exercitationem vel vero ex accusantium cum - repudiandae ducimus, minus dolor. Ipsa ad iste atque, maxime quod - laboriosam dolorem cum pariatur ullam repellendus eveniet impedit - recusandae, officiis neque aliquam excepturi dicta? Quasi, neque! Fuga - deserunt consequuntur aut.
); diff --git a/system/libs/figa-ui/src/lib/expandable-link/expandable-link.test.tsx b/system/libs/figa-ui/src/lib/expandable-link/expandable-link.test.tsx index e69de29bb..6b1737096 100644 --- a/system/libs/figa-ui/src/lib/expandable-link/expandable-link.test.tsx +++ b/system/libs/figa-ui/src/lib/expandable-link/expandable-link.test.tsx @@ -0,0 +1,34 @@ +import { render } from '@testing-library/react'; +import { ExpandableLink } from './expandable-link'; +import { ThemeProvider } from '../theme-provider'; + +describe('Exapndable link can be used when:', () => { + const Fixture = () => { + return ( + + + + Inputs + + + + Empty Input + + + Filled Input + + + + + ); + }; + + it('[FRAGILE] assigns class names for particular nodes', () => { + const { asFragment } = render(); + + expect(asFragment()).toMatchSnapshot(); + }); +}); diff --git a/system/libs/figa-ui/src/lib/expandable-link/expandable-link.tsx b/system/libs/figa-ui/src/lib/expandable-link/expandable-link.tsx index 292e4b3db..f67b6a5ca 100644 --- a/system/libs/figa-ui/src/lib/expandable-link/expandable-link.tsx +++ b/system/libs/figa-ui/src/lib/expandable-link/expandable-link.tsx @@ -11,7 +11,7 @@ import { tokens } from '../theme-provider'; import { ListItem } from '../list'; import { Link } from '../link'; -const Container = styled.section` +const Container = styled.nav` ${column()} user-select: none; position: relative; @@ -20,11 +20,12 @@ const Container = styled.section` position: absolute; top: 100%; left: 0; - visibility: hidden; + display: none; white-space: nowrap; + &:focus-within, &:hover { - visibility: visible; + display: block; } } @@ -34,10 +35,11 @@ const Container = styled.section` padding: ${tokens.spacing[400]} ${tokens.spacing[300]}; background-color: ${(props) => props.theme.box.filled.bg}; - &:hover { + &:hover, + &:focus { color: ${(props) => props.theme.font.primary.color}; & + .expandable-link-list { - visibility: visible; + display: block; } } @@ -81,6 +83,7 @@ const ExpandableLinkName = ({ isActive ? 'expandable-link-name--active' : null, className )} + tabIndex={0} > {children} From acc06428fc641ea03e86927561f0f5814826da2f Mon Sep 17 00:00:00 2001 From: jedwoj Date: Tue, 21 Nov 2023 23:56:16 +0100 Subject: [PATCH 4/4] small code tweaks and improvements --- .../expandable-link.test.tsx.snap | 40 +++++----- .../figa-ui/src/lib/expandable-link/defs.ts | 8 +- .../expandable-link.stories.tsx | 11 ++- .../expandable-link/expandable-link.test.tsx | 2 +- .../lib/expandable-link/expandable-link.tsx | 80 ++++++++++--------- 5 files changed, 73 insertions(+), 68 deletions(-) diff --git a/system/libs/figa-ui/src/lib/expandable-link/__snapshots__/expandable-link.test.tsx.snap b/system/libs/figa-ui/src/lib/expandable-link/__snapshots__/expandable-link.test.tsx.snap index 4c4ba2844..64ef7ac47 100644 --- a/system/libs/figa-ui/src/lib/expandable-link/__snapshots__/expandable-link.test.tsx.snap +++ b/system/libs/figa-ui/src/lib/expandable-link/__snapshots__/expandable-link.test.tsx.snap @@ -3,43 +3,41 @@ exports[`Exapndable link can be used when: [FRAGILE] assigns class names for particular nodes 1`] = ` diff --git a/system/libs/figa-ui/src/lib/expandable-link/defs.ts b/system/libs/figa-ui/src/lib/expandable-link/defs.ts index 6894731df..cbbb620e9 100644 --- a/system/libs/figa-ui/src/lib/expandable-link/defs.ts +++ b/system/libs/figa-ui/src/lib/expandable-link/defs.ts @@ -5,15 +5,15 @@ type DefaultComponentProps = { className?: string; }; -interface ExpandableLinkProps extends DefaultComponentProps {} +interface ExpandableLinkProps extends DefaultComponentProps { + active: boolean; +} interface ExpandableLinkItemProps extends DefaultComponentProps { path: string; } -interface ExpandableLinkNameProps extends DefaultComponentProps { - isActive: boolean; -} +interface ExpandableLinkNameProps extends DefaultComponentProps {} interface ExpandableLinkListProps extends Omit { diff --git a/system/libs/figa-ui/src/lib/expandable-link/expandable-link.stories.tsx b/system/libs/figa-ui/src/lib/expandable-link/expandable-link.stories.tsx index a9b2c7450..fe9c2b26a 100644 --- a/system/libs/figa-ui/src/lib/expandable-link/expandable-link.stories.tsx +++ b/system/libs/figa-ui/src/lib/expandable-link/expandable-link.stories.tsx @@ -2,18 +2,19 @@ import type { Story, Meta } from '@storybook/react'; import { ExpandableLink } from './expandable-link'; import { Box } from '../box'; +import { ExpandableLinkProps } from './defs'; export default { component: ExpandableLink, title: 'ExpandableLink', } as Meta; -const Template: Story = () => { +const Template: Story = (props) => { return (
- - Inputs + + Inputs Empty Input @@ -29,4 +30,6 @@ const Template: Story = () => { }; export const Default = Template.bind({}); -Default.args = {}; +Default.args = { + active: true, +}; diff --git a/system/libs/figa-ui/src/lib/expandable-link/expandable-link.test.tsx b/system/libs/figa-ui/src/lib/expandable-link/expandable-link.test.tsx index 6b1737096..f56805d2a 100644 --- a/system/libs/figa-ui/src/lib/expandable-link/expandable-link.test.tsx +++ b/system/libs/figa-ui/src/lib/expandable-link/expandable-link.test.tsx @@ -6,7 +6,7 @@ describe('Exapndable link can be used when:', () => { const Fixture = () => { return ( - + Inputs diff --git a/system/libs/figa-ui/src/lib/expandable-link/expandable-link.tsx b/system/libs/figa-ui/src/lib/expandable-link/expandable-link.tsx index f67b6a5ca..b28e4dab0 100644 --- a/system/libs/figa-ui/src/lib/expandable-link/expandable-link.tsx +++ b/system/libs/figa-ui/src/lib/expandable-link/expandable-link.tsx @@ -16,6 +16,29 @@ const Container = styled.nav` user-select: none; position: relative; + &:hover, + &:focus { + color: ${(props) => props.theme.font.primary.color}; + & .expandable-link-list { + display: block; + } + } + + &.active { + &::after { + content: ''; + position: absolute; + left: 0; + bottom: 0; + ${size(tokens.spacing[50], '100%')}; + background-color: ${(props) => props.theme.outline.color}; + } + + & .expandable-link-name { + color: ${(props) => props.theme.font.primary.color}; + } + } + .expandable-link-list { position: absolute; top: 100%; @@ -34,37 +57,19 @@ const Container = styled.nav` width: fit-content; padding: ${tokens.spacing[400]} ${tokens.spacing[300]}; background-color: ${(props) => props.theme.box.filled.bg}; - - &:hover, - &:focus { - color: ${(props) => props.theme.font.primary.color}; - & + .expandable-link-list { - display: block; - } - } - - &--active { - &::after { - content: ''; - position: absolute; - left: 0; - bottom: 0; - ${size(tokens.spacing[50], '100%')}; - background-color: ${(props) => props.theme.outline.color}; - } - } } .expandable-link-list-item { cursor: pointer; background-color: ${(props) => props.theme.box.filled.bg}; padding: ${tokens.spacing[100]} ${tokens.spacing[200]}; + display: block; - & a { + & { text-decoration: none; } - &:hover a { + &:hover span { color: ${(props) => props.theme.font.primary.color}; } } @@ -73,18 +78,9 @@ const Container = styled.nav` const ExpandableLinkName = ({ className, children, - isActive, }: ExpandableLinkNameProps) => { return ( - + {children} ); @@ -96,11 +92,11 @@ const ExpandableLinkItem = ({ path, }: ExpandableLinkItemProps) => { return ( - - - {children} - - + + + {children} + + ); }; @@ -111,8 +107,16 @@ const ExpandableLinkList = ({ return
    {children}
; }; -const ExpandableLink = ({ className, children }: ExpandableLinkProps) => { - return {children}; +const ExpandableLink = ({ + className, + children, + active, +}: ExpandableLinkProps) => { + return ( + + {children} + + ); }; ExpandableLink.Name = ExpandableLinkName;