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

package/src/components/Dropdown/styles.tsx

@@ -0,0 +1,120 @@
+import * as Select from '@radix-ui/react-select';
+import styled from 'styled-components';
+
+import { INPUT_ERROR_CSS } from '../InputError/InputError';
+import { BODY_5_CSS } from '../Text/styles';
+import { InputHeight } from '../TextInput/TextInput';
+
+export const DROPDOWN_MAX_WIDTH = '300px';
+
+export const DropdownWrapper = styled.div<{ $maxWidth?: string }>`
+  position: relative;
+  max-width: ${({ $maxWidth }) => $maxWidth || DROPDOWN_MAX_WIDTH};
+  width: 100%;
+`;
+
+export const SelectTrigger = styled(Select.Trigger)<{
+  $hasError: boolean;
+  $height?: string;
+}>`
+  all: unset;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: ${({ theme, $height }) =>
+    $height === InputHeight.Small
+      ? theme.spacing.xxsmall
+      : `${theme.spacing.xxsmall} ${theme.spacing.xsmall}`};
+  line-height: 1.25;
+  height: ${({ $height }) => ($height === InputHeight.Small ? '34px' : '40px')};
+  gap: ${({ theme }) => theme.spacing.xsmall};
+  background-color: ${({ theme }) => theme.color.surface.primary};
+  border-radius: 5px;
+  border: 2px solid ${({ theme }) => theme.color.border.subtle};
+  width: 100%;
+  color: ${({ theme }) => theme.color.text.secondary};
+  margin-bottom: ${({ theme }) => theme.spacing.xxxxsmall};
+
+  > span:first-child,
+  > span:first-child p {
+    ${BODY_5_CSS}
+
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &:hover {
+    opacity: 80%;
+  }
+
+  svg {
+    color: ${({ theme }) => theme.color.text.secondary};
+  }
+
+  &[data-placeholder] {
+    background-color: ${({ theme }) => theme.color.surface.primary};
+    color: ${({ theme }) => theme.color.text.tertiary};
+
+    svg {
+      color: ${({ theme }) => theme.color.text.highlight};
+    }
+  }
+
+  ${({ $hasError }) => $hasError && INPUT_ERROR_CSS}
+`;
+
+export const SelectValue = styled(Select.Value)`
+  &[data-placeholder] {
+    background-color: ${({ theme }) => theme.color.surface.primary};
+  }
+`;
+
+export const SelectContent = styled(Select.Content)`
+  overflow: hidden;
+  background-color: ${({ theme }) => theme.color.surface.elevated};
+  border-radius: 6px;
+  box-shadow:
+    0px 10px 38px -10px rgba(22, 23, 24, 0.35),
+    0px 10px 20px -15px rgba(22, 23, 24, 0.2);
+  z-index: 100;
+`;
+
+export const SelectViewport = styled(Select.Viewport)`
+  padding: ${({ theme }) => theme.spacing.xxsmall}
+    ${({ theme }) => theme.spacing.xxxsmall};
+  max-height: 200px;
+  overflow: scroll;
+`;
+
+export const SelectIcon = styled(Select.Icon)`
+  display: flex;
+`;
+
+export const SelectItem = styled(Select.Item)`
+  font-size: 13px;
+  line-height: 1;
+  border-radius: 3px;
+  display: flex;
+  align-items: center;
+  height: 25px;
+  padding: 0 ${({ theme }) => theme.spacing.large} 0
+    ${({ theme }) => theme.spacing.medium};
+  position: relative;
+  user-select: none;
+
+  &:disabled {
+    color: gray;
+    pointer-events: none;
+  }
+`;
+
+export const SelectItemIndicator = styled(Select.ItemIndicator)`
+  position: absolute;
+  left: 0;
+  width: 25px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+`;

package/src/components/Icon/Icon.stories.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+import { Icon } from './Icon';
+import * as allIcons from './index';
+import { tokensPixelated, Gradients } from '@a-little-world/little-world-design-system-core';
+import Text from '../Text/Text';
+import styled from 'styled-components';
+;
+
+export default {
+  component: Icon,
+  title: 'Components/Icons',
+  argTypes: {
+    color: { control: 'color' },
+    gradient: { control: 'select', options: Gradients },
+    height: { control: 'text' },
+    width: { control: 'text' },
+  },
+};
+
+export const AllVariants = args => (
+  <div
+    style={{ display: 'flex', flexWrap: 'wrap', gap: tokensPixelated.spacing.medium }}
+  >
+    {Object.entries(allIcons).map(([name, Component]) => (
+      <Component key={name} label={name} {...args} />
+    ))}
+  </div>
+);
+
+const StyledStack = styled(allIcons.StackIcon)`
+  height: 64px;
+  width: 64px;
+  color: red;
+`;
+
+export const StyledIcon = (args) => {
+  return (
+    <div>
+      <Text>Icon should have custom styles applied: Red and height of 64px</Text>
+      <StyledStack label="Stack Icon" />
+    </div>
+  )
+}

package/src/components/Icon/Icon.test.tsx

@@ -0,0 +1,20 @@
+// @ts-nocheck
+import React from 'react';
+import { render, screen } from '../../testUtils';
+import { Icon } from './Icon';
+
+test('Icon should render correct icon with label', () => {
+  const MOCK_LABEL = 'mock label';
+  const SVG_ID = 'svg';
+
+  render(
+    <Icon label={MOCK_LABEL}>
+      <svg aria-labelledby={MOCK_LABEL} data-testid={SVG_ID} />
+    </Icon>,
+  );
+
+  const svg = screen.getByTestId('svg');
+  const label = screen.getByText(MOCK_LABEL);
+  expect(svg).toBeInTheDocument();
+  expect(label).toBeInTheDocument();
+});

package/src/components/Icon/Icon.tsx

@@ -0,0 +1,88 @@
+import React, { SVGProps } from 'react';
+import styled, { css } from 'styled-components';
+
+import {
+  Gradients,
+  IconBaseProps,
+} from '@a-little-world/little-world-design-system-core';
+
+const Circle = styled.div<{
+  $backgroundColor?: string;
+  $borderColor?: string;
+  color?: string;
+}>`
+  background: ${({ theme, $backgroundColor }) =>
+    $backgroundColor || theme.color.surface.secondary};
+  border: 2px solid
+    ${({ theme, $borderColor }) => $borderColor || theme.color.border.contrast};
+  border-radius: 50%;
+  color: ${({ color }) => color || 'currentColor'};
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: ${({ theme }) => theme.spacing.xxsmall};
+`;
+
+// hide element but keep visible to screen readers
+// parent requires position: relative;
+export const ImageLabel = styled.span<{
+  $top: string | number;
+  $visible?: boolean;
+}>`
+  ${({ $top, $visible }) =>
+    $visible
+      ? css`
+          position: relative;
+          top: ${$top};
+        `
+      : css`
+          position: absolute;
+          clip: rect(1px, 1px, 1px, 1px);
+          height: 1px;
+          overflow: hidden;
+
+          white-space: nowrap;
+          width: 1px;
+
+          &:focus {
+            clip: auto;
+            height: auto;
+            overflow: auto;
+            position: absolute;
+            width: auto;
+          }
+        `}
+`;
+
+export type IconSvgProps = Omit<IconBaseProps, 'children'> &
+  SVGProps<SVGElement> & { gradient?: Gradients };
+
+export const Icon = ({
+  backgroundColor,
+  borderColor,
+  children,
+  circular,
+  className,
+  color,
+  label,
+  labelVisible,
+  labelTop = '56px',
+}: IconBaseProps) => (
+  <>
+    {circular ? (
+      <Circle
+        $backgroundColor={backgroundColor}
+        $borderColor={borderColor}
+        className={className}
+        color={color}
+      >
+        {children}
+      </Circle>
+    ) : (
+      children
+    )}
+    <ImageLabel id={label} $visible={labelVisible} $top={labelTop}>
+      {label}
+    </ImageLabel>
+  </>
+);

package/src/components/Icon/IconDocs.mdx

@@ -0,0 +1,22 @@
+import { ArgsTable, Meta, Preview, Story, ArgTypes } from '@storybook/addon-docs/blocks';
+import { CustomThemeProvider } from '../../theme';
+
+import Status from '../../utils/status';
+
+<Meta title="Components/Icon" />
+
+<CustomThemeProvider>
+  # Icons
+
+  <Status React="Prototype" Figma="https://www.figma.com/" />
+
+  Icons are small and contextual, if you need something more prominent, exciting
+  and prominent you need an illustration.
+
+  Icons are small graphical elements used to communicate short simple concepts and draw attention to important information. The can be used inside buttons and other inline UI elements.
+
+  In order to be accessible they are always rendered with a label that is hidden.
+
+  Only use icons without additional clarification if you're sure that it can communicate the message at a glance without lots of thinking.
+</CustomThemeProvider>
+

package/src/components/Icon/IconGradient.tsx

@@ -0,0 +1,70 @@
+import {
+  GradientTypes,
+  GradientVariations,
+  IconGradientProps,
+} from '@a-little-world/little-world-design-system-core';
+import React from 'react';
+
+const IconGradient = ({
+  id,
+  variation,
+  type = GradientTypes.v1,
+}: IconGradientProps) => {
+  if (type === GradientTypes.v1)
+    return (
+      <linearGradient
+        id={id}
+        x1="0%"
+        y1="0%"
+        x2="100%"
+        y2="100%"
+        gradientUnits="objectBoundingBox"
+      >
+        <stop offset="0%" stopColor={GradientVariations[variation][0]} />
+        <stop offset="33%" stopColor={GradientVariations[variation][0]} />
+        <stop offset="100%" stopColor={GradientVariations[variation][1]} />
+      </linearGradient>
+    );
+
+  if (type === GradientTypes.v2)
+    return (
+      <defs>
+        <linearGradient
+          id={id}
+          x1="27.9721"
+          y1="99.877"
+          x2="116.893"
+          y2="99.877"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor={GradientVariations[variation][0]} />
+          <stop offset="1" stopColor={GradientVariations[variation][1]} />
+        </linearGradient>
+      </defs>
+    );
+
+  if (type === GradientTypes.v3)
+    return (
+      <defs>
+        <linearGradient
+          id={id}
+          x1="8.6001"
+          y1="94.48"
+          x2="186.19"
+          y2="94.48"
+          gradientUnits="userSpaceOnUse"
+          gradientTransform="matrix(1, 0, 0, 1, 160.535599, 138.286461)"
+        >
+          <stop stopColor={GradientVariations[variation][0]} />
+          <stop offset="0.18" stopColor={GradientVariations[variation][2]} />
+          <stop offset="0.55" stopColor={GradientVariations[variation][3]} />
+          <stop offset="0.83" stopColor={GradientVariations[variation][4]} />
+          <stop offset="1" stopColor={GradientVariations[variation][5]} />
+        </linearGradient>
+      </defs>
+    );
+
+  return <></>;
+};
+
+export default IconGradient;

package/src/components/Icon/createIconComponent.tsx

@@ -0,0 +1,63 @@
+import React, { CSSProperties } from 'react';
+
+import { Icon, IconSvgProps } from './Icon';
+
+import {
+  SvgFactoryOptions,
+  SvgTransformOptions,
+} from '@a-little-world/little-world-design-system-core';
+import { createReactSvg } from '../../utils/createReactSvg';
+
+export const createIconComponent = ({
+  name,
+  svgData,
+  gradientType,
+}: SvgFactoryOptions) => {
+  const Component = ({
+    backgroundColor,
+    borderColor,
+    circular,
+    className,
+    color,
+    gradient,
+    height = 24,
+    label,
+    labelVisible,
+    style,
+    width = 24,
+  }: IconSvgProps & { style?: CSSProperties; color?: string }) => {
+    const gradientId = label
+      ? `gradient-${label.replace(/\s/g, '')}`
+      : 'gradient-icon-needs-label';
+    const svgOptions: SvgTransformOptions = {
+      color,
+      className: circular ? undefined : className,
+      gradient,
+      gradientId,
+      gradientType,
+      height,
+      label,
+      style,
+      width,
+    };
+
+    return (
+      <Icon
+        backgroundColor={backgroundColor}
+        borderColor={borderColor}
+        circular={circular}
+        className={className}
+        style={style}
+        color={color}
+        label={label}
+        labelVisible={labelVisible}
+      >
+        {createReactSvg(svgData, svgOptions)}
+      </Icon>
+    );
+  };
+
+  Component.displayName = `${name}Icon`;
+
+  return Component;
+};

package/src/components/Icon/getDefaultIconProps.ts

@@ -0,0 +1,23 @@
+import { IconSvgProps } from './Icon';
+
+export const getDefaultIconProps = ({
+  backgroundColor,
+  borderColor,
+  circular,
+  className,
+  color,
+  height,
+  gradient,
+  width,
+  ...rest
+}: IconSvgProps): IconSvgProps => ({
+  backgroundColor,
+  borderColor,
+  circular,
+  className,
+  color: color || 'currentColor',
+  height: height || '32',
+  gradient,
+  width: width || '32',
+  ...rest,
+});