property-practice-ui 0.0.1

package/src/atoms/SocialButton/SocialButton.tsx

@@ -0,0 +1,90 @@
+import styled from 'styled-components';
+import { colors } from '../../tokens/colors';
+
+const variants = ['primary', 'secondary', 'inverse', 'filled'] as const;
+type Variant = (typeof variants)[number];
+
+const StyledButton = styled.button<{ variant: Variant }>`
+  width: 2.5rem;
+  height: 2.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  background-color: ${(props) => {
+    switch (props.variant) {
+      case 'filled':
+        return colors.background.brand;
+      case 'primary':
+      case 'secondary':
+      case 'inverse':
+      default:
+        return 'transparent';
+    }
+  }};
+  border: 2px solid ${(props) => {
+    switch (props.variant) {
+      case 'primary':
+        return colors.text.brand;
+      case 'secondary':
+        return colors.text.blue;
+      case 'inverse':
+        return colors.text.secondary; 
+      case 'filled':
+        return colors.background.brand;
+      default:
+        return colors.text.brand;
+    }
+  }};
+  color: ${(props) => {
+    switch (props.variant) {
+      case 'primary':
+        return colors.text.brand;
+      case 'secondary':
+        return colors.text.blue;
+      case 'inverse':
+        return colors.text.secondary; 
+      case 'filled':
+        return colors.text.secondary;
+      default:
+        return colors.text.brand;
+    }
+  }};
+  cursor: pointer;
+  transition: all 0.2s;
+
+  &:hover {
+    opacity: 0.8;
+  }
+
+  svg {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+`;
+
+interface SocialButtonProps {
+  icon: React.ReactNode;
+  onClick?: () => void;
+  variant?: Variant;
+  ariaLabel?: string;
+}
+
+export const SocialButton = ({
+  icon,
+  onClick,
+  variant = 'primary',
+  ariaLabel,
+}: SocialButtonProps) => {
+  return (
+    <StyledButton
+      onClick={onClick}
+      variant={variant}
+      aria-label={ariaLabel}
+    >
+      {icon}
+    </StyledButton>
+  );
+};
+
+SocialButton.variants = variants;

package/src/atoms/TermsCheckbox/TermsCheckbox.stories.tsx

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ComponentProps, useState } from 'react';
+import { TermsCheckbox as Component } from './TermsCheckbox';
+
+const meta: Meta = {
+  title: 'Atoms/TermsCheckbox',
+  component: Component,
+};
+
+export default meta;
+
+export const TermsCheckbox: StoryObj<Omit<ComponentProps<typeof Component>, 'onClick'>> = {
+  render: (args) => {
+    const [checked, setChecked] = useState(false);
+    
+    return (
+      <Component
+        {...args}
+        checked={checked}
+        onChange={setChecked}
+      />
+    );
+  },
+  args: {
+    text: "By submitting, I agree to Juta's",
+    termsText: 'Terms and Conditions',
+    termsUrl: '/terms',
+    cookieText: 'Cookie Policy',
+    cookieUrl: '/cookie-policy',
+
+  },
+  argTypes: {
+    text: { control: 'text' },
+    termsText: { control: 'text' },
+    termsUrl: { control: 'text' },
+    cookieText: { control: 'text' },
+    cookieUrl: { control: 'text' },
+
+  },
+};
+
+export const Checked: StoryObj<ComponentProps<typeof Component>> = {
+  render: (args) => {
+    const [checked, setChecked] = useState(true);
+    
+    return (
+      <Component
+        {...args}
+        checked={checked}
+        onChange={setChecked}
+      />
+    );
+  },
+  args: {
+    text: "By submitting, I agree to Juta's",
+    termsText: 'Terms and Conditions',
+    termsUrl: '/terms',
+    cookieText: 'Cookie Policy',
+    cookieUrl: '/cookie-policy',
+
+  },
+};

package/src/atoms/TermsCheckbox/TermsCheckbox.tsx

@@ -0,0 +1,150 @@
+import styled from 'styled-components';
+import { colors } from '../../tokens/colors';
+
+const variants = ['primary', 'secondary', 'subtle'] as const;
+type Variant = (typeof variants)[number];
+
+const CheckboxContainer = styled.label`
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  cursor: pointer;
+  font-size: 0.875rem;
+  line-height: 1.5;
+`;
+
+const HiddenCheckbox = styled.input.attrs({ type: 'checkbox' })`
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+`;
+
+const StyledCheckbox = styled.div<{ $checked: boolean; variant: Variant }>`
+  width: 1.25rem;
+  height: 1.25rem;
+  border: 2px solid ${props => {
+    if (props.$checked) {
+      switch (props.variant) {
+        case 'primary':
+          return colors.text.brand;
+        case 'secondary':
+          return colors.text.blue;
+        case 'subtle':
+          return colors.text.subtle;
+        default:
+          return colors.text.brand;
+      }
+    }
+    return colors.text.subtle; 
+  }};
+  border-radius: 4px;
+  background-color: ${props => {
+    if (props.$checked) {
+      switch (props.variant) {
+        case 'primary':
+          return colors.text.brand;
+        case 'secondary':
+          return colors.text.blue;
+        case 'subtle':
+          return colors.text.subtle;
+        default:
+          return colors.text.brand;
+      }
+    }
+    return 'transparent';
+  }};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: all 0.2s;
+
+  &::after {
+    content: '✓';
+    color: ${colors.text.secondary}; // white checkmark
+    font-size: 0.875rem;
+    font-weight: bold;
+    display: ${props => props.$checked ? 'block' : 'none'};
+  }
+`;
+
+const Text = styled.span<{ variant: Variant }>`
+  color: ${(props) => {
+    switch (props.variant) {
+      case 'primary':
+        return colors.text.primary;
+      case 'secondary':
+        return colors.text.blue;
+      case 'subtle':
+        return colors.text.subtle;
+      default:
+        return colors.text.primary;
+    }
+  }};
+`;
+
+const Link = styled.a<{ variant: Variant }>`
+  color: ${(props) => {
+    switch (props.variant) {
+      case 'primary':
+        return colors.text.brand;
+      case 'secondary':
+        return colors.text.blue;
+      case 'subtle':
+        return colors.text.subtle;
+      default:
+        return colors.text.brand;
+    }
+  }};
+  font-weight: 700;
+  text-decoration: underline;
+  cursor: pointer;
+
+  &:hover {
+    opacity: 0.8;
+  }
+`;
+
+interface TermsCheckboxProps {
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  text?: string;
+  termsText?: string;
+  termsUrl?: string;
+  cookieText?: string;
+  cookieUrl?: string;
+  variant?: Variant;
+}
+
+export const TermsCheckbox = ({
+  checked,
+  onChange,
+  text = "By submitting, I agree to Juta's",
+  termsText = "Terms and Conditions",
+  termsUrl = "/terms",
+  cookieText = "Cookie Policy",
+  cookieUrl = "/cookie-policy",
+  variant = 'primary',
+}: TermsCheckboxProps) => {
+  return (
+    <CheckboxContainer>
+      <HiddenCheckbox
+        checked={checked}
+        onChange={(e) => onChange(e.target.checked)}
+      />
+      <StyledCheckbox $checked={checked} variant={variant} />
+      <Text variant={variant}>
+        {text}{' '}
+        <Link href={termsUrl} variant={variant} target="_blank" rel="noopener noreferrer">
+          {termsText}
+        </Link>
+        {' '}and{' '}
+        <Link href={cookieUrl} variant={variant} target="_blank" rel="noopener noreferrer">
+          {cookieText}
+        </Link>
+      </Text>
+    </CheckboxContainer>
+  );
+};
+
+TermsCheckbox.variants = variants;

package/src/atoms/Text/Text.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ComponentProps } from 'react';
+import { colors } from '../../tokens/colors';
+import { Text as Component } from './Text';
+
+const meta: Meta = {
+  title: 'Atoms/Text',
+  component: Component,
+};
+
+export default meta;
+
+export const Text: StoryObj<ComponentProps<typeof Component>> = {
+  args: {
+    color: 'active',
+    variant: 'sm',
+    children: 'Text',
+  },
+  argTypes: {
+    children: {
+      control: 'text',
+    },
+    color: {
+      control: 'select',
+      options: Object.keys(colors.text),
+    },
+    variant: {
+      control: 'select',
+      options: Component.variants,
+    },
+  },
+};

package/src/atoms/Text/Text.tsx

@@ -0,0 +1,49 @@
+import styled from 'styled-components';
+import { colors } from '../../tokens/colors';
+
+const sizes = ['sm', 'md', 'lg'] as const;
+
+const variants = {
+  sm: {
+    fontSize: '14px',
+    fontWeight: 500,
+  },
+  md: {
+    fontSize: '16px',
+    fontWeight: 500,
+  },
+  lg: {
+    fontSize: '18px',
+    fontWeight: 500,
+  },
+} as const;
+
+type Variant = keyof typeof variants;
+
+type Color = keyof typeof colors.text;
+
+interface TextProps {
+  children: string;
+  variant?: Variant;
+  color?: Color;
+}
+
+const StyledText = styled.h1<{ variant: Variant; color: Color }>`
+  color: ${(props) => colors.text[props?.color]};
+  font-size: ${(props) => variants[props.variant].fontSize};
+  font-weight: ${(props) => variants[props.variant].fontWeight};
+`;
+
+export const Text = ({
+  children,
+  color = 'primary',
+  variant = 'md',
+}: TextProps) => {
+  return (
+    <StyledText color={color} variant={variant}>
+      {children}
+    </StyledText>
+  );
+};
+
+Text.variants = sizes;

package/src/atoms/TextButton/TextButton.stories.tsx

@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ComponentProps } from 'react';
+import { TextButton as Component } from './TextButton';
+
+const meta: Meta = {
+  title: 'Atoms/TextButton',
+  component: Component,
+};
+
+export default meta;
+
+export const TextButton: StoryObj<Omit<ComponentProps<typeof Component>, 'onClick'>> = {
+  args: {
+    text: 'Click Me',
+    bgVariant: 'brand',
+    textVariant: 'secondary',
+    uppercase: true,
+    bold: false,
+  },
+  argTypes: {
+    text: { control: 'text' },
+    bgVariant: {
+      control: 'select',
+      options: ['primary', 'secondary', 'tertiary', 'subtle', 'blue', 'brand', 'light', 'transparent'],
+    },
+    textVariant: {
+      control: 'select',
+      options: ['brand', 'primary', 'secondary', 'tertiary', 'subtle', 'light', 'error', 'blue'],
+    },
+    uppercase: { control: 'boolean' },
+    bold: { control: 'boolean' },
+  },
+};
+
+export const DarkButton: StoryObj<ComponentProps<typeof Component>> = {
+  args: {
+    text: 'Dark Button',
+    bgVariant: 'brand',
+    textVariant: 'secondary',
+  },
+};
+
+export const LightButton: StoryObj<ComponentProps<typeof Component>> = {
+  args: {
+    text: 'Light Button',
+    bgVariant: 'secondary',
+    textVariant: 'primary',
+  },
+};
+
+export const TealButton: StoryObj<ComponentProps<typeof Component>> = {
+  args: {
+    text: 'Teal Button',
+    bgVariant: 'subtle',
+    textVariant: 'secondary',
+  },
+};
+
+export const TransparentButton: StoryObj<ComponentProps<typeof Component>> = {
+  args: {
+    text: 'Transparent Button',
+    bgVariant: 'transparent',
+    textVariant: 'primary',
+  },
+};
+
+export const AllCombinations: StoryObj = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+      <Component text="Dark BG + White Text" bgVariant="brand" textVariant="secondary" />
+      <Component text="Light BG + Dark Text" bgVariant="secondary" textVariant="primary" />
+      <Component text="Teal BG + White Text" bgVariant="subtle" textVariant="secondary" />
+      <Component text="Blue BG + White Text" bgVariant="blue" textVariant="secondary" />
+      <Component text="Transparent + Dark Text" bgVariant="transparent" textVariant="primary" />
+    </div>
+  ),
+};

package/src/atoms/TextButton/TextButton.tsx

@@ -0,0 +1,78 @@
+import styled from 'styled-components';
+import { colors } from '../../tokens/colors';
+
+const bgVariants = ['primary', 'secondary', 'tertiary', 'subtle', 'blue', 'brand', 'light', 'transparent'] as const;
+const textVariants = ['brand', 'primary', 'secondary', 'tertiary', 'subtle', 'light', 'error', 'blue'] as const;
+
+type BgVariant = (typeof bgVariants)[number];
+type TextVariant = (typeof textVariants)[number];
+
+const StyledContainer = styled.button<{ 
+  as?: 'button' | 'div';
+  bgVariant: BgVariant;
+}>`
+  padding: 0 1rem;
+  height: 2.5rem;
+  display: flex;
+  align-items: center;
+  flex-shrink:0;
+  white-space: nowrap;
+  background-color: ${(props) => {
+    if (props.bgVariant === 'transparent') return 'transparent';
+    return colors.background[props.bgVariant];
+  }};
+  transition: all 0.2s;
+  border: none;
+  cursor: pointer;
+
+  &:hover {
+    opacity: 0.9;
+  }
+`;
+
+const StyledText = styled.span<{ 
+  textVariant: TextVariant;
+  $uppercase?: boolean;
+  $bold?: boolean;
+}>`
+  color: ${(props) => colors.text[props.textVariant]};
+  font-size: 0.75rem;
+  letter-spacing: 0.05em;
+  text-transform: ${props => props.$uppercase ? 'uppercase' : 'none'};
+  font-weight: ${props => props.$bold ? 700 : 600};
+`;
+
+interface TextButtonProps {
+  text: string;
+  onClick?: () => void;
+  asChild?: boolean;
+  bgVariant?: BgVariant;
+  textVariant?: TextVariant;
+  uppercase?: boolean;
+  bold?: boolean;
+}
+
+export const TextButton = ({ 
+  text,
+  onClick,
+  asChild = false,
+  bgVariant = 'brand',
+  textVariant = 'secondary',
+  uppercase = true,
+  bold = false
+}: TextButtonProps) => {
+  return (
+    <StyledContainer 
+      as={asChild ? 'div' : 'button'}
+      onClick={onClick}
+      bgVariant={bgVariant}
+    >
+      <StyledText textVariant={textVariant} $uppercase={uppercase} $bold={bold}>
+        {text}
+      </StyledText>
+    </StyledContainer>
+  );
+};
+
+TextButton.bgVariants = bgVariants;
+TextButton.textVariants = textVariants;

package/src/atoms/Textarea/Textarea.tsx

@@ -0,0 +1,36 @@
+import { ChangeEvent } from 'react';
+import styled from 'styled-components';
+import { colors } from '../../tokens/colors';
+import { InputTypes, type BaseInputProps } from '../../types';
+
+interface TextareaProps extends Omit<BaseInputProps, 'label'> {
+  onChange: (event: ChangeEvent<HTMLTextAreaElement>) => void;
+  disabled?: boolean;
+  value?: string | number;
+  rows?: number;
+  cols?: number;
+}
+
+const StyledTextarea = styled.textarea`
+  display: block;
+  width: 100%;
+  height: 100%;
+  outline: none;
+  background-color: transparent;
+  color: ${colors.text.subtle};
+  font-weight: 600;
+  resize: vertical;
+`;
+
+export const Textarea = ({
+  name,
+  onChange,
+  rows = 3,
+  ...rest
+}: TextareaProps) => {
+  return (
+    <StyledTextarea name={name} onChange={onChange} rows={rows} {...rest} />
+  );
+};
+
+Textarea.types = InputTypes;

package/src/atoms/ToggleButton/ToggleButton.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ComponentProps, useState } from 'react';
+import { ToggleButton as Component } from './ToggleButton';
+
+const meta: Meta = {
+  title: 'Atoms/ToggleButton',
+  component: Component,
+};
+
+export default meta;
+
+export const ToggleButton: StoryObj<Omit<ComponentProps<typeof Component>, 'onClick'>> = {
+  render: (args) => {
+    const [activeOption, setActiveOption] = useState('GENERAL');
+    
+    return (
+      <Component
+        {...args}
+        activeOption={activeOption}
+        onChange={setActiveOption}
+      />
+    );
+  },
+  args: {
+    options: ['GENERAL', 'LEGAL'],
+
+  },
+  argTypes: {
+    options: { control: 'object' },
+
+  },
+};