@veeqo/ui 0.0.1 → 0.0.4

package/src/components/Accordion/__snapshots__/Accordion.test.tsx.snap

@@ -0,0 +1,152 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Accordion renders correctly 1`] = `
+.c0 {
+  box-sizing: border-box;
+  position: relative;
+  margin: 0;
+  padding: 0;
+}
+
+.c5 {
+  box-sizing: border-box;
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 12px;
+  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
+  line-height: 16px;
+  color: #37424d;
+  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 14px;
+  line-height: 20px;
+  color: #37424D;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  -webkit-letter-spacing: -0.006rem;
+  -moz-letter-spacing: -0.006rem;
+  -ms-letter-spacing: -0.006rem;
+  letter-spacing: -0.006rem;
+}
+
+.c3 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c4 svg {
+  margin-right: 12px;
+  height: 1rem;
+  width: 1rem;
+}
+
+.c6 {
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  -webkit-box-flex: 2;
+  -webkit-flex-grow: 2;
+  -ms-flex-positive: 2;
+  flex-grow: 2;
+}
+
+.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  padding: 12px;
+  border-radius: 4px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  cursor: pointer;
+  border: 1px solid #CDD1D5;
+}
+
+.c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  height: 16px;
+}
+
+.c7 {
+  height: 20px;
+  width: auto;
+  margin-left: 12px;
+  -webkit-transition: -webkit-transform 250ms;
+  -webkit-transition: transform 250ms;
+  transition: transform 250ms;
+}
+
+<div>
+  <div
+    class="c0"
+  >
+    <div
+      class="c0 c1"
+    >
+      <div
+        class="c0 c2"
+      >
+        <div
+          class="c0 c3 c4"
+        >
+          <span
+            class="c5"
+          >
+            test-label
+          </span>
+        </div>
+        <div
+          class="c0 c3 c6"
+        >
+          <svg
+            class="c7"
+            fill="none"
+            height="1.5rem"
+            name="downArrow"
+            role="presentation"
+            viewBox="0 0 16 16"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              clip-rule="evenodd"
+              d="M11.0302 5.52997L7.97021 8.5833L4.91021 5.52997L3.97021 6.46997L7.97021 10.47L11.9702 6.46997L11.0302 5.52997Z"
+              fill="currentColor"
+              fill-rule="evenodd"
+            />
+          </svg>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/src/components/Accordion/index.ts

@@ -0,0 +1 @@
+export { Accordion } from './Accordion';

package/src/components/Accordion/styled.ts

@@ -0,0 +1,102 @@
+import styled from 'styled-components';
+
+import { BaseContainer } from '../BaseContainer';
+import { Text } from '../Text';
+import { theme } from '../../theme';
+import { DownArrowIcon } from '../../tempIcons/DownArrowIcon';
+import { sizes } from '../../theme/modules/sizes';
+
+const TapBarChild = styled(BaseContainer)`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`;
+
+const Left = styled(TapBarChild)`
+  svg {
+    margin-right: 12px;
+    height: ${sizes.base};
+    width: ${sizes.base};
+  }
+`;
+
+const Right = styled(TapBarChild as any)`
+  justify-content: flex-end;
+  flex-grow: 2;
+`;
+
+const TapBar = styled(BaseContainer)`
+  display: flex;
+  flex-direction: column;
+  padding: 12px;
+  border-radius: 4px;
+  user-select: none;
+  cursor: pointer;
+
+  ${(props: { shouldOpen: boolean }) => {
+    const greyDark: string = theme.colors.neutral.grey.dark ?? '#CDD1D5';
+    const secondaryBlueBase: string = theme.colors.secondary.blue.base ?? '#0079D1';
+
+    return `
+      border: 1px solid ${props.shouldOpen ? secondaryBlueBase : greyDark};
+    `;
+  }}
+`;
+
+const Top = styled(BaseContainer)`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 16px;
+`;
+
+const Arrow = styled(DownArrowIcon)`
+  height: 20px;
+  width: auto;
+  margin-left: 12px;
+  transition: transform 250ms;
+
+  ${(props: { shouldOpen: boolean }) => {
+    if (props.shouldOpen) {
+      return 'transform: rotate(180deg);';
+    }
+    return '';
+  }}
+`;
+
+const Description = styled(Text)`
+  margin-top: 8px;
+`;
+
+const Content = styled(BaseContainer)`
+  margin-top: 4px;
+  background: rgba(217, 235, 248, 0.5);
+  padding: 10px 26px;
+  transition:
+    opacity 400ms,
+    transform 400ms;
+
+  &.content-enter {
+    opacity: 0;
+    transform: translateY(-6px);
+  }
+
+  &.content-enter-active {
+    opacity: 1;
+    transition: all 200ms;
+    transform: translateY(0px);
+  }
+
+  &.content-exit {
+    opacity: 1;
+    transform: translateY(0px);
+  }
+
+  &.content-exit-active {
+    opacity: 0;
+    transition: all 200ms;
+    transform: translateY(-6px);
+  }
+`;
+
+export { Content, TapBar, Top, Text, Arrow, Left, Right, Description };

package/src/components/ActionList/ActionList.stories.tsx

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ActionList } from '.';
+
+const meta = {
+  title: 'Components/UI/ActionList',
+  component: ActionList,
+  tags: ['autodocs'],
+} satisfies Meta<typeof ActionList>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    title: 'Actions',
+    items: [
+      { title: 'Option 1', onClick: () => {} },
+      { title: 'Option 2', onClick: () => {} },
+      { title: 'Option 3', onClick: () => {} },
+    ],
+  },
+};

package/src/components/ActionList/ActionList.test.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ActionList } from './ActionList';
+
+const items = [
+  { title: 'Option 1', onClick: () => {} },
+  { title: 'Option 2', onClick: () => {} },
+  { title: 'Option 3', onClick: () => {} },
+];
+
+const sections = [
+  {
+    title: 'Section 1',
+    items: [
+      { title: 'Option 1', onClick: () => {} },
+      { title: 'Option 2', onClick: () => {} },
+      { title: 'Option 3', onClick: () => {} },
+    ],
+  },
+  {
+    title: 'Section 2',
+    items: [
+      { title: 'Option 1', onClick: () => {} },
+      { title: 'Option 2', onClick: () => {} },
+    ],
+  },
+];
+
+describe('ActionList', () => {
+  test('it renders items correctly', () => {
+    const { container } = render(<ActionList title="Actions" items={items} />);
+    expect(container).toMatchSnapshot();
+  });
+
+  test('it renders sections correctly', () => {
+    const { container } = render(<ActionList title="Actions" sections={sections} />);
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/ActionList/ActionList.tsx

@@ -0,0 +1,72 @@
+import React, { useState } from 'react';
+
+import { Popover } from '../Popover';
+import { Button } from '../Button';
+
+import { ActionListProps, ActionListItem, ActionListSection } from './types';
+
+import { Section, SectionHeading, ListCard, Item, ActionItem, LinkItem } from './styled';
+
+const itemMap = {
+  item: Item,
+  action: ActionItem,
+  link: LinkItem,
+};
+
+export const ActionList = ({
+  title,
+  items = [],
+  sections,
+  buttonVariant,
+  buttonSize,
+}: ActionListProps) => {
+  const [isActive, setIsActive] = useState(false);
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+
+  const handleClick = (callback: () => void) => {
+    setIsActive(false);
+    callback();
+  };
+
+  const renderItem = (item: ActionListItem) => {
+    const ItemComponent = itemMap[item.variant || 'item'];
+    return (
+      <ItemComponent onClick={() => handleClick(item.onClick)} key={item.title}>
+        {item.icon && item.icon}
+        <span>{item.title}</span>
+      </ItemComponent>
+    );
+  };
+
+  const renderSection = (section: ActionListSection) => (
+    <Section key={section.title}>
+      {section.title && <SectionHeading>{section.title}</SectionHeading>}
+      {section.items.map(renderItem)}
+    </Section>
+  );
+
+  const listItemMarkup = sections ? sections.map(renderSection) : items.map(renderItem);
+
+  return (
+    <>
+      <Button
+        dropdown
+        variant={buttonVariant}
+        size={buttonSize}
+        onClick={() => setIsActive(!isActive)}
+        ref={setAnchorEl}
+      >
+        {title}
+      </Button>
+      {isActive && (
+        <Popover
+          anchorElement={anchorEl}
+          placement="bottom-start"
+          onShouldClose={() => setIsActive(false)}
+        >
+          <ListCard>{listItemMarkup}</ListCard>
+        </Popover>
+      )}
+    </>
+  );
+};

package/src/components/ActionList/__snapshots__/ActionList.test.tsx.snap

@@ -0,0 +1,247 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ActionList it renders items correctly 1`] = `
+.c2 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  gap: 8px;
+}
+
+.c2 svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.c0 {
+  position: relative;
+  box-sizing: border-box;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
+  font-weight: 400;
+  border: 1px solid;
+  background-color: transparent;
+  white-space: nowrap;
+  --outline-width: 4px;
+  height: 40px;
+  padding-left: 24px;
+  padding-right: 16px;
+  border-radius: 8px;
+  font-size: 16px;
+}
+
+.c0:hover {
+  cursor: pointer;
+}
+
+.c0:disabled {
+  pointer-events: none;
+  cursor: unset !important;
+}
+
+.c0 > span {
+  position: relative;
+  top: -1px;
+}
+
+.c1 {
+  border-color: #CDD1D5;
+  background-color: white;
+  box-shadow: 0 1px 3px rgba(55,66,77,0.15);
+  color: #37424D;
+}
+
+.c1:hover {
+  background-color: #FAFAFB;
+}
+
+.c1:active {
+  background-color: #FAFAFB;
+  border-color: #0079D1;
+  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
+}
+
+.c1:focus-visible {
+  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
+  outline: 0;
+}
+
+.c1:disabled {
+  box-shadow: none !important;
+  background-color: #DFE3E8 !important;
+  border-color: #DFE3E8 !important;
+  color: #637381 !important;
+}
+
+<div>
+  <button
+    class="c0 c1"
+  >
+    <span
+      class="c2"
+    >
+      <span>
+        Actions
+      </span>
+      <svg
+        fill="none"
+        style="width: 1rem; height: 1rem;"
+        viewBox="0 0 16 16"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          clip-rule="evenodd"
+          d="M4 6L8 10L12 6H4Z"
+          fill="currentColor"
+          fill-rule="evenodd"
+        />
+      </svg>
+    </span>
+  </button>
+</div>
+`;
+
+exports[`ActionList it renders sections correctly 1`] = `
+.c2 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  gap: 8px;
+}
+
+.c2 svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.c0 {
+  position: relative;
+  box-sizing: border-box;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
+  font-weight: 400;
+  border: 1px solid;
+  background-color: transparent;
+  white-space: nowrap;
+  --outline-width: 4px;
+  height: 40px;
+  padding-left: 24px;
+  padding-right: 16px;
+  border-radius: 8px;
+  font-size: 16px;
+}
+
+.c0:hover {
+  cursor: pointer;
+}
+
+.c0:disabled {
+  pointer-events: none;
+  cursor: unset !important;
+}
+
+.c0 > span {
+  position: relative;
+  top: -1px;
+}
+
+.c1 {
+  border-color: #CDD1D5;
+  background-color: white;
+  box-shadow: 0 1px 3px rgba(55,66,77,0.15);
+  color: #37424D;
+}
+
+.c1:hover {
+  background-color: #FAFAFB;
+}
+
+.c1:active {
+  background-color: #FAFAFB;
+  border-color: #0079D1;
+  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
+}
+
+.c1:focus-visible {
+  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
+  outline: 0;
+}
+
+.c1:disabled {
+  box-shadow: none !important;
+  background-color: #DFE3E8 !important;
+  border-color: #DFE3E8 !important;
+  color: #637381 !important;
+}
+
+<div>
+  <button
+    class="c0 c1"
+  >
+    <span
+      class="c2"
+    >
+      <span>
+        Actions
+      </span>
+      <svg
+        fill="none"
+        style="width: 1rem; height: 1rem;"
+        viewBox="0 0 16 16"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          clip-rule="evenodd"
+          d="M4 6L8 10L12 6H4Z"
+          fill="currentColor"
+          fill-rule="evenodd"
+        />
+      </svg>
+    </span>
+  </button>
+</div>
+`;

package/src/components/ActionList/index.ts

@@ -0,0 +1 @@
+export { ActionList } from './ActionList';

package/src/components/ActionList/styled.ts

@@ -0,0 +1,62 @@
+import styled from 'styled-components';
+import { theme } from '../../theme';
+
+import { Button } from '../Button';
+import { Card } from '../Card';
+import { Text } from '../Text';
+
+const { sizes, colors, text } = theme;
+
+export const ListCard = styled(Card.Surface)`
+  min-width: 280px;
+  padding: ${sizes.base} 0;
+  display: flex;
+  flex-direction: column;
+`;
+
+export const Section = styled.section`
+  display: flex;
+  flex-direction: column;
+
+  & + & {
+    border-top: 1px solid ${colors.neutral.grey.base};
+    margin-top: ${sizes.base};
+    padding-top: ${sizes.base};
+  }
+`;
+
+export const SectionHeading = styled(Text).attrs({ variant: 'subheadingSmall' })`
+  margin: ${sizes.sm} ${sizes.base} ${sizes.sm};
+`;
+
+export const Item = styled(Button).attrs({ variant: 'unstyled' })`
+  box-sizing: border-box;
+  min-height: ${sizes.lg};
+  padding: ${sizes.xs} ${sizes.base};
+
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+
+  font-family: ${text.body.fontFamily};
+  font-size: ${text.body.fontSize};
+  font-weight: ${text.body.fontWeight};
+
+  &:hover {
+    background-color: ${colors.neutral.grey.light};
+    color: ${colors.secondary.blue.base};
+  }
+
+  & > * + * {
+    margin-left: ${sizes[3]};
+  }
+`;
+
+export const ActionItem = styled(Item)`
+  color: ${colors.secondary.blue.base};
+`;
+
+export const LinkItem = styled(Item)`
+  color: ${colors.secondary.blue.base};
+  text-decoration: underline;
+`;