@a-little-world/little-world-design-system 2.10.0

package/src/components/Button/Button.stories.tsx

@@ -0,0 +1,119 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { tokensPixelated } from '@a-little-world/little-world-design-system-core'
+import { InfoIcon, PhoneIcon } from '../Icon';
+import Text from '../Text/Text';
+import { TextTypes } from '@a-little-world/little-world-design-system-core';
+import Button, { ButtonSizes, ButtonVariations } from './Button';
+
+export default {
+  component: Button,
+  title: 'Components/Button',
+};
+
+export const Default = args => (
+  <div style={{ display: 'flex', gap: tokensPixelated.spacing.large }}>
+    <Button {...args}>Blah Blah</Button>
+    <Button {...args}>
+      Blah Blah{' '}
+      <InfoIcon label="info" width={16} height={16} />
+    </Button>
+  </div>
+);
+
+export const ButtonOption = args => (
+  <Button variation={ButtonVariations.Option} {...args}>
+    <PhoneIcon label="phone icon" />
+    Call partner
+  </Button>
+);
+
+export const ButtonCircle = args => (
+  <div style={{ display: 'flex', gap: tokensPixelated.spacing.large }}>
+    <Button variation={ButtonVariations.Circle} color={args.color}>
+      <InfoIcon label="info" width={20} height={20} />
+    </Button>
+    <Button
+      variation={ButtonVariations.Circle}
+      color={args.color}
+      size={ButtonSizes.Small}
+    >
+      <InfoIcon label="info small" />
+    </Button>
+    <Button
+      variation={ButtonVariations.Circle}
+      color={args.color}
+      size={ButtonSizes.Medium}
+    >
+      <InfoIcon label="info medium" />
+    </Button>
+    <Button
+      variation={ButtonVariations.Circle}
+      color={args.color}
+      size={ButtonSizes.Large}
+    >
+      <InfoIcon label="info large" />
+    </Button>
+  </div>
+);
+
+export const ButtonIcon = args => (
+  <div style={{ display: 'flex', gap: tokensPixelated.spacing.large }}>
+    <Button variation={ButtonVariations.Icon} color={args.color}>
+      <InfoIcon label="info" />
+    </Button>
+    <Button
+      variation={ButtonVariations.Icon}
+      color={args.color}
+      size={ButtonSizes.Small}
+    >
+      <InfoIcon circular label="info small" />
+    </Button>
+    <Button
+      variation={ButtonVariations.Icon}
+      color={args.color}
+      size={ButtonSizes.Medium}
+    >
+      <InfoIcon circular label="info medium" />
+    </Button>
+    <Button
+      variation={ButtonVariations.Icon}
+      color={args.color}
+      size={ButtonSizes.Large}
+    >
+      <InfoIcon circular label="info large" />
+    </Button>
+  </div>
+);
+
+ButtonIcon.args = { color: '#000'};
+
+const StyledSpan = styled(Text)`
+  margin-right: ${tokensPixelated.spacing.xxsmall};
+`;
+
+export const ButtonInline = args => (
+  <div>
+    <span>
+      <StyledSpan tag="span" type={TextTypes.Body4}>
+        This is the default styling:
+      </StyledSpan>
+      <Button variation={ButtonVariations.Inline}>
+        <Text type={TextTypes.Body4} tag="span">
+          Click to activate.
+        </Text>
+      </Button>
+    </span>
+    <span>
+      <StyledSpan tag="span" type={TextTypes.Body4}>
+        This is with the color prop set:
+      </StyledSpan>
+      <Button variation={ButtonVariations.Inline} color="red">
+        <Text type={TextTypes.Body4} tag="span">
+          Click to activate.
+        </Text>
+      </Button>
+    </span>
+  </div>
+);

package/src/components/Button/Button.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+
+import {
+  ButtonAppearance,
+  ButtonBaseProps,
+  ButtonSizes,
+  ButtonVariations,
+} from '@a-little-world/little-world-design-system-core';
+import Loading from '../Loading/Loading';
+import { StyledButton } from './styles';
+
+// Re-export enums for easy access
+export { ButtonAppearance, ButtonSizes, ButtonVariations };
+
+export interface ButtonProps
+  extends ButtonBaseProps,
+    React.ComponentPropsWithoutRef<'button'> {
+  isDummy?: boolean; // Renders a div instead of a button
+}
+
+export type Ref = HTMLButtonElement;
+
+const Button: React.FC<ButtonProps> = React.forwardRef<Ref, ButtonProps>(
+  (
+    {
+      appearance = ButtonAppearance.Primary,
+      backgroundColor,
+      borderColor,
+      color,
+      children,
+      isDummy,
+      loading,
+      size,
+      variation = ButtonVariations.Basic,
+      type = 'button',
+      ...rest
+    },
+    ref,
+  ) => {
+    return (
+      <StyledButton
+        $appearance={appearance}
+        $backgroundColor={backgroundColor}
+        $borderColor={borderColor}
+        $color={color}
+        $size={size}
+        $variation={variation}
+        as={isDummy ? 'div' : 'button'}
+        ref={ref}
+        type={type}
+        {...rest}
+      >
+        {loading ? <Loading /> : children}
+      </StyledButton>
+    );
+  },
+);
+
+export default Button;

package/src/components/Button/styles.tsx

@@ -0,0 +1,313 @@
+import styled, { css } from 'styled-components';
+
+import {
+  ButtonAppearance,
+  ButtonSizes,
+  ButtonVariations,
+} from '@a-little-world/little-world-design-system-core';
+import { LINK_HOVER_CSS } from '../Link/styles';
+
+export const OPTION_BUTTON_CSS = css<{
+  $appearance?: ButtonAppearance;
+  $backgroundColor?: string;
+  $color?: string;
+}>`
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  background: ${({ $backgroundColor, theme }) =>
+    $backgroundColor || theme.color.surface.secondary};
+  border: 1px solid ${({ theme }) => theme.color.border.subtle};
+  color: ${({ $color, theme }) => $color || theme.color.text.primary};
+  border-radius: 15px;
+  font-weight: 700;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  padding: ${({ theme }) => theme.spacing.xsmall};
+  gap: ${({ theme }) => theme.spacing.xxxsmall};
+  max-width: 144px;
+  align-items: center;
+  justify-content: center;
+  font-weight: normal;
+  flex-shrink: 0;
+  min-height: 69px;
+
+  &:not(:disabled):hover {
+    filter: brightness(95%);
+    cursor: pointer;
+    box-shadow:
+      0 0 10px 1px rgb(0 0 0 / 11%),
+      0 0 8px 3px rgb(255 255 255 / 15%);
+  }
+
+  ${({ $appearance, $backgroundColor, $color, theme }) =>
+    $appearance === ButtonAppearance.Secondary &&
+    css`
+      color: ${$color || theme.color.text.button};
+      background: ${$backgroundColor || theme.color.gradient.blue10};
+    `}
+`;
+
+const StandardButtonCss = css<{ $size?: string }>`
+  font-weight: 700;
+  border-radius: 90px;
+  padding: ${({ theme }) => `${theme.spacing.xsmall} ${theme.spacing.small}`};
+  height: 49px;
+  max-width: 480px;
+  gap: ${({ theme }) => theme.spacing.xxxxsmall};
+
+  ${({ $size }) => {
+    if ($size === ButtonSizes.Small || !$size) {
+      return `min-width: 110px;`;
+    }
+
+    if ($size === ButtonSizes.Medium) {
+      return `min-width: 160px;`;
+    }
+
+    if ($size === ButtonSizes.Large) {
+      return `min-width: 240px;`;
+    }
+
+    if ($size === ButtonSizes.Stretch) {
+      return `width: 100%;`;
+    }
+  }}
+`;
+
+export const PrimaryButtonCss = css`
+  ${StandardButtonCss}
+
+  color: ${({ theme }) => theme.color.text.button};
+  border: none;
+  background: ${({ theme, $backgroundColor }: any) =>
+    $backgroundColor || theme.color.gradient.orange10};
+  transition:
+    background-color 0.5s ease,
+    filter 0.5s ease,
+    border-color 0.5s ease,
+    color 0.5s ease,
+    0.4s;
+
+  &:not(:disabled):hover {
+    filter: brightness(80%);
+    transition:
+      background-color 0.5s ease,
+      filter 0.5s ease,
+      border-color 0.5s ease,
+      color 0.5s ease,
+      0.4s;
+  }
+`;
+
+export const SecondaryButtonCss = css`
+  ${StandardButtonCss}
+
+  ${({ $color, $backgroundColor, theme }: any) => `
+    border: 2px solid ${$color || theme.color.border.bold};
+    background-color: ${$backgroundColor || 'transparent'};
+    color: ${$color || theme.color.text.heading};
+    transition: background-color 0.5s ease, filter 0.5s ease,
+    border-color 0.5s ease, color 0.5s ease, 0.4s;
+
+    &:not(:disabled):hover {
+      background: ${$color || theme.color.text.heading};
+      color: ${theme.color.text.control};
+      border-color: ${$color || theme.color.border.bold};
+      transition: background-color 0.5s ease, filter 0.5s ease,
+      border-color 0.5s ease, color 0.5s ease, 0.4s;
+    }
+  `}
+`;
+
+export const StyledButton = styled.button<{
+  $appearance?: ButtonAppearance;
+  $backgroundColor?: string;
+  $borderColor?: string;
+  $color?: string;
+  $variation: ButtonVariations;
+  $size?: ButtonSizes;
+}>`
+  cursor: pointer;
+  position: relative;
+  color: ${({ $color }) => $color || 'currentColor'};
+  font-family: 'Signika Negative';
+  font-size: 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  transition:
+    background-color 0.5s ease,
+    filter 0.5s ease,
+    border-color 0.5s ease,
+    color 0.5s ease,
+    0.4s;
+
+  &:not(:disabled):hover {
+    transition:
+      background-color 0.5s ease,
+      filter 0.5s ease,
+      border-color 0.5s ease,
+      color 0.5s ease,
+      0.4s;
+  }
+
+  & > * {
+    cursor: pointer;
+  }
+
+  &:disabled {
+    background: ${({ theme }) => theme.color.surface.disabled};
+    border-color: ${({ theme }) => theme.color.border.disabled};
+    color: ${({ theme }) => theme.color.text.disabled};
+    cursor: not-allowed;
+
+    & > * {
+      cursor: not-allowed;
+    }
+  }
+
+  ${({
+    $appearance,
+    $backgroundColor,
+    $borderColor,
+    $size,
+    $variation,
+    theme,
+  }) => {
+    if ($variation === ButtonVariations.Basic) {
+      if ($appearance === ButtonAppearance.Primary) return PrimaryButtonCss;
+      if ($appearance === ButtonAppearance.Secondary) return SecondaryButtonCss;
+    }
+
+    if ($variation === ButtonVariations.Option) return OPTION_BUTTON_CSS;
+
+    let CIRCLE_DIMENSIONS;
+    switch ($size) {
+      case ButtonSizes.Small:
+        CIRCLE_DIMENSIONS = css`
+          width: 28px;
+          height: 28px;
+        `;
+        break;
+      case ButtonSizes.Medium:
+        CIRCLE_DIMENSIONS = css`
+          width: 36px;
+          height: 36px;
+        `;
+        break;
+      default:
+      case ButtonSizes.Large:
+        CIRCLE_DIMENSIONS = css`
+          width: 44px;
+          height: 44px;
+        `;
+        break;
+    }
+
+    if ($variation === ButtonVariations.Circle)
+      return css`
+        border: 1px solid ${$borderColor || $backgroundColor || 'currentColor'};
+        background: ${$backgroundColor || 'transparent'};
+        border-radius: 50%;
+        padding: 0;
+        transition: opacity 0.5s ease;
+        ${CIRCLE_DIMENSIONS}
+
+        &:not(:disabled):hover {
+          transition: opacity 0.3s ease;
+          opacity: 0.6;
+        }
+
+        ${CIRCLE_DIMENSIONS}
+      `;
+
+    let ICON_DIMENSIONS;
+    switch ($size) {
+      case ButtonSizes.Small:
+        ICON_DIMENSIONS = css`
+          width: 16px;
+          height: 16px;
+        `;
+        break;
+      case ButtonSizes.Medium:
+        ICON_DIMENSIONS = css`
+          width: 24px;
+          height: 24px;
+        `;
+        break;
+      case ButtonSizes.Large:
+        ICON_DIMENSIONS = css`
+          width: 32px;
+          height: 32px;
+        `;
+        break;
+      default:
+        break;
+    }
+    if ($variation === ButtonVariations.Icon) {
+      return css`
+        background: ${$backgroundColor || 'transparent'};
+        border-radius: ${theme.radius.xxxsmall};
+        width: auto;
+        min-width: 0;
+        height: fit-content;
+        transition: background 0.5s ease;
+
+        &:has(> svg:first-child) {
+          width: fit-content;
+          padding: ${!$size || $size === ButtonSizes.Small
+            ? theme.spacing.xxxsmall
+            : theme.spacing.xxsmall};
+        }
+
+        &:not(:disabled):has(> svg:first-child):hover {
+          transition: background 0.3s ease;
+          background: ${theme.color.surface.secondary};
+        }
+
+        &:not(:disabled):hover {
+          svg {
+            opacity: 0.5;
+            transition: opacity 0.5s ease;
+          }
+        }
+
+        svg {
+          transition: opacity 0.5s ease;
+          ${ICON_DIMENSIONS}
+        }
+      `;
+    }
+
+    if ($variation === ButtonVariations.Inline)
+      return css`
+        display: inline-flex;
+        border: none;
+        border-radius: 0px;
+        height: auto;
+        width: auto;
+        gap: ${({ theme }) => theme.spacing.xxxsmall};
+        padding: ${({ theme }) => theme.spacing.xxxxsmall} 0;
+        transition: all 0.3s ease-in-out;
+        background: transparent;
+
+        &:disabled {
+          background: transparent;
+        }
+
+        ${LINK_HOVER_CSS}
+
+        &:not(:disabled):hover {
+          background-position: 0;
+
+          &::before {
+            width: 100%;
+          }
+        }
+      `;
+  }}
+`;

package/src/components/Card/Card.stories.tsx

@@ -0,0 +1,22 @@
+import React, { useState } from 'react';
+
+import Button, { ButtonAppearance } from '../Button/Button';
+import Card, { CardFooter, CardHeader } from './Card';
+
+export default {
+  component: Card,
+  title: 'Components/Card',
+};
+
+export const Default = args => <Card {...args}>Blah Blah</Card>;
+
+export const CardWithSubElements = args => (
+  <Card {...args}>
+    <CardHeader>Card Header</CardHeader>
+    This is the card content.
+    <CardFooter align="space-between">
+      <Button appearance={ButtonAppearance.Secondary}>Reject</Button>
+      <Button>Accept</Button>
+    </CardFooter>
+  </Card>
+);

package/src/components/Card/Card.tsx

@@ -0,0 +1,125 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+
+import {
+  CardBaseProps,
+  CardContentProps,
+  CardDimensions,
+  CardFooterProps,
+  CardHeaderProps,
+  CardSizes,
+} from '@a-little-world/little-world-design-system-core';
+import Text from '../Text/Text';
+import { TextTypes } from '@a-little-world/little-world-design-system-core';
+import { pixelate } from '../../utils/styles';
+
+export { CardSizes, CardDimensions };
+
+const StyledCard = styled.div<{
+  $borderColor?: string;
+  $height?: string;
+  $width?: CardSizes;
+}>`
+  border-radius: ${({ theme }) => theme.radius.small};
+  background: ${({ theme }) => theme.color.surface.primary};
+  border: 1px solid
+    ${({ theme, $borderColor }) => $borderColor || theme.color.border.subtle};
+  box-shadow: 0px 1px 25px 1px rgba(0, 0, 0, 0.05);
+  width: 100%;
+  max-width: 100%;
+  max-height: 100%;
+
+  display: flex;
+  flex-direction: column;
+  padding: ${({ theme }) => theme.spacing.small};
+
+  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
+    border-radius: ${({ theme }) => theme.radius.xxlarge};
+    padding: ${({ $width, theme }) =>
+      $width === pixelate(CardDimensions[CardSizes.Small])
+        ? theme.spacing.medium
+        : theme.spacing.large};
+
+    ${({ $width }) =>
+      $width &&
+      css`
+        width: ${pixelate(CardDimensions[$width])};
+      `}
+  }
+
+  ${({ $height }) =>
+    $height &&
+    css`
+      height: ${$height};
+    `}
+`;
+
+const StyledCardHeader = styled(Text)`
+  margin-bottom: ${({ theme }) => theme.spacing.small};
+`;
+
+export const CardContent = styled.div<CardContentProps>`
+  display: flex;
+  flex-direction: column;
+  align-items: ${({ align }) => align || 'center'};
+  gap: ${({ gap, theme }) => gap || theme.spacing.small};
+  text-align: ${({ textAlign }) => textAlign || 'left'};
+  margin-bottom: ${({ marginBottom, theme }) =>
+    marginBottom || theme.spacing.small};
+  overflow: scroll;
+`;
+
+const Footer = styled.div<{ $align?: string }>`
+  display: flex;
+  order: 1;
+  margin-top: auto;
+  width: 100%;
+  gap: ${({ theme }) => theme.spacing.small};
+
+  ${({ $align }) =>
+    $align &&
+    css`
+      justify-content: ${$align};
+    `};
+`;
+
+type CardProps = CardBaseProps & {
+  className?: string;
+};
+
+export const CardHeader: React.FC<CardHeaderProps> = ({
+  children,
+  textColor,
+  textType,
+}) => (
+  <StyledCardHeader
+    type={textType || TextTypes.Heading4}
+    center
+    color={textColor}
+  >
+    {children}
+  </StyledCardHeader>
+);
+
+export const CardFooter: React.FC<CardFooterProps> = ({ children, align }) => (
+  <Footer $align={align}>{children}</Footer>
+);
+
+const Card: React.FC<CardProps> = ({
+  borderColor,
+  children,
+  className,
+  height,
+  width,
+}) => (
+  <StyledCard
+    className={className}
+    $borderColor={borderColor}
+    $height={height as string}
+    $width={width}
+  >
+    {children}
+  </StyledCard>
+);
+
+export default Card;

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import Checkbox from './Checkbox';
+
+export default {
+  component: Checkbox,
+  title: 'Components/Checkbox',
+};
+
+export const Default = args => {
+  return <Checkbox {...args} />;
+};