Issue #135 | [Medium][figa-ui] Create expandable link component

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';

system/libs/figa-ui/src/lib/expandable-link/__snapshots__/expandable-link.test.tsx.snap

@@ -0,0 +1,44 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Exapndable link can be used when: [FRAGILE] assigns class names for particular nodes 1`] = `
+<DocumentFragment>
+  <nav
+    class="sc-bcXHqe fYMbQz my-class-container"
+    tabindex="0"
+  >
+    <span
+      class="font h3 default link expandable-link-name my-class-name"
+    >
+      Inputs
+    </span>
+    <ul
+      class="expandable-link-list my-class-list"
+    >
+      <a
+        class="expandable-link-list-item my-class-item"
+        href="/?path=/story/input--empty-input"
+      >
+        <li>
+          <span
+            class="font h3 default link"
+          >
+            Empty Input
+          </span>
+        </li>
+      </a>
+      <a
+        class="expandable-link-list-item"
+        href="/?path=/story/input--filled-input"
+      >
+        <li>
+          <span
+            class="font h3 default link"
+          >
+            Filled Input
+          </span>
+        </li>
+      </a>
+    </ul>
+  </nav>
+</DocumentFragment>
+`;

system/libs/figa-ui/src/lib/expandable-link/defs.ts

@@ -0,0 +1,28 @@
+import type { ReactNode } from 'react';
+
+type DefaultComponentProps = {
+  children: ReactNode;
+  className?: string;
+};
+
+interface ExpandableLinkProps extends DefaultComponentProps {
+  active: boolean;
+}
+
+interface ExpandableLinkItemProps extends DefaultComponentProps {
+  path: string;
+}
+
+interface ExpandableLinkNameProps extends DefaultComponentProps {}
+
+interface ExpandableLinkListProps
+  extends Omit<DefaultComponentProps, 'children'> {
+  children: ReactNode[];
+}
+
+export type {
+  ExpandableLinkProps,
+  ExpandableLinkItemProps,
+  ExpandableLinkNameProps,
+  ExpandableLinkListProps,
+};

system/libs/figa-ui/src/lib/expandable-link/expandable-link.stories.tsx

@@ -0,0 +1,35 @@
+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<ExpandableLinkProps> = (props) => {
+  return (
+    <Box padding={[2000, 2000, 2000, 2000]}>
+      <div style={{ display: 'flex' }}>
+        <ExpandableLink active={props.active}>
+          <ExpandableLink.Name>Inputs</ExpandableLink.Name>
+          <ExpandableLink.List>
+            <ExpandableLink.Item path="/?path=/story/input--empty-input">
+              Empty Input
+            </ExpandableLink.Item>
+            <ExpandableLink.Item path="/?path=/story/input--filled-input">
+              Filled Input
+            </ExpandableLink.Item>
+          </ExpandableLink.List>
+        </ExpandableLink>
+      </div>
+    </Box>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  active: true,
+};

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 (
+      <ThemeProvider>
+        <ExpandableLink isActive className="my-class-container">
+          <ExpandableLink.Name className="my-class-name">
+            Inputs
+          </ExpandableLink.Name>
+          <ExpandableLink.List className="my-class-list">
+            <ExpandableLink.Item
+              className="my-class-item"
+              path="/?path=/story/input--empty-input"
+            >
+              Empty Input
+            </ExpandableLink.Item>
+            <ExpandableLink.Item path="/?path=/story/input--filled-input">
+              Filled Input
+            </ExpandableLink.Item>
+          </ExpandableLink.List>
+        </ExpandableLink>
+      </ThemeProvider>
+    );
+  };
+
+  it('[FRAGILE] assigns class names for particular nodes', () => {
+    const { asFragment } = render(<Fixture />);
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

system/libs/figa-ui/src/lib/expandable-link/expandable-link.tsx

@@ -0,0 +1,126 @@
+import styled from 'styled-components';
+import type {
+  ExpandableLinkProps,
+  ExpandableLinkItemProps,
+  ExpandableLinkNameProps,
+  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.nav`
+  ${column()}
+  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%;
+    left: 0;
+    display: none;
+    white-space: nowrap;
+
+    &:focus-within,
+    &:hover {
+      display: block;
+    }
+  }
+
+  .expandable-link-name {
+    cursor: pointer;
+    width: fit-content;
+    padding: ${tokens.spacing[400]} ${tokens.spacing[300]};
+    background-color: ${(props) => props.theme.box.filled.bg};
+  }
+
+  .expandable-link-list-item {
+    cursor: pointer;
+    background-color: ${(props) => props.theme.box.filled.bg};
+    padding: ${tokens.spacing[100]} ${tokens.spacing[200]};
+    display: block;
+
+    & {
+      text-decoration: none;
+    }
+
+    &:hover span {
+      color: ${(props) => props.theme.font.primary.color};
+    }
+  }
+`;
+
+const ExpandableLinkName = ({
+  className,
+  children,
+}: ExpandableLinkNameProps) => {
+  return (
+    <Link variant="h3" className={c('expandable-link-name', className)}>
+      {children}
+    </Link>
+  );
+};
+
+const ExpandableLinkItem = ({
+  children,
+  className,
+  path,
+}: ExpandableLinkItemProps) => {
+  return (
+    <a className={c('expandable-link-list-item', className)} href={path}>
+      <ListItem>
+        <Link variant="h3">{children}</Link>
+      </ListItem>
+    </a>
+  );
+};
+
+const ExpandableLinkList = ({
+  className,
+  children,
+}: ExpandableLinkListProps) => {
+  return <ul className={c('expandable-link-list', className)}>{children}</ul>;
+};
+
+const ExpandableLink = ({
+  className,
+  children,
+  active,
+}: ExpandableLinkProps) => {
+  return (
+    <Container className={c(className, { active })} tabIndex={0}>
+      {children}
+    </Container>
+  );
+};
+
+ExpandableLink.Name = ExpandableLinkName;
+ExpandableLink.List = ExpandableLinkList;
+ExpandableLink.Item = ExpandableLinkItem;
+
+export { ExpandableLink };

system/libs/figa-ui/src/lib/expandable-link/index.ts

@@ -0,0 +1 @@
+export * from './expandable-link';