Selection comps

components/card/Card.stories.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Story } from '@storybook/react';
+
+import Card, { CardProps } from './Card';
+
+export default {
+  title: 'Components/Card',
+  component: Card,
+  argTypes: {
+    active: {
+      control: 'boolean',
+      defaultValue: false,
+    },
+    withHoverEffect: {
+      control: 'boolean',
+      defaultValue: false,
+    },
+  },
+};
+
+const DefaultTemplate: Story<CardProps> = (args) => (
+  <Card style={{ height: 100, width: 150 }} {...args} />
+);
+
+export const Default = DefaultTemplate.bind({});

components/card/Card.styled.tsx

@@ -0,0 +1,24 @@
+import styled, { css } from 'styled-components';
+
+import { CardProps } from './Card';
+
+export const CardContainer = styled.div<CardProps>`
+  border: 2px solid #e2e8f0;
+  border-radius: 8px;
+  background-color: white;
+  cursor: pointer;
+
+  ${({ withHoverEffect }) =>
+    withHoverEffect &&
+    css`
+      &:hover {
+        border-color: ${({ theme }) => theme.colors.primary};
+      }
+    `}
+
+  ${({ active, theme }) =>
+    active &&
+    css`
+      border-color: ${theme.colors.primary};
+    `}
+`;

components/card/Card.tsx

@@ -0,0 +1,15 @@
+import React, { ComponentPropsWithoutRef, FC } from 'react';
+import styled from 'styled-components';
+
+import { CardContainer } from './Card.styled';
+
+export interface CardProps extends ComponentPropsWithoutRef<'div'> {
+  active?: boolean;
+  withHoverEffect?: boolean;
+}
+
+const Card: FC<CardProps> = ({ children, ...rest }) => (
+  <CardContainer {...rest}>{children}</CardContainer>
+);
+
+export default styled(Card)``;

components/cloudProviderCard/CloudProviderCard.stories.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Story } from '@storybook/react';
+
+import { InstallationType } from '../../types';
+
+import CloudProviderCard, { CloudProviderCardProps } from './CloudProviderCard';
+
+export default {
+  title: 'Components/CloudProviderCard',
+  component: CloudProviderCard,
+  argTypes: {
+    option: {
+      control: 'select',
+      options: InstallationType,
+      defaultValue: InstallationType.LOCAL,
+    },
+    active: {
+      control: 'boolean',
+      defaultValue: false,
+    },
+    withHoverEffect: {
+      control: 'boolean',
+      defaultValue: true,
+    },
+  },
+};
+
+const DefaultTemplate: Story<CloudProviderCardProps> = (args) => <CloudProviderCard {...args} />;
+
+export const Default = DefaultTemplate.bind({});

components/cloudProviderCard/CloudProviderCard.styled.tsx

@@ -0,0 +1,32 @@
+import styled from 'styled-components';
+
+import Card from '../card/Card';
+
+export const LabelContainer = styled.div`
+  display: flex;
+  gap: 16px;
+`;
+
+export const DetailsContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin-left: 24px;
+
+  p {
+    margin-top: 4px;
+    color: ${({ theme }) => theme.colors.saltboxBlue};
+  }
+`;
+
+export const LinkContent = styled.a`
+  text-decoration: none;
+  color: ${({ theme }) => theme.colors.primary};
+`;
+
+export const CardContainer = styled(Card)`
+  display: flex;
+  align-items: center;
+  width: 540px;
+  padding: 24px;
+`;

components/cloudProviderCard/CloudProviderCard.tsx

@@ -0,0 +1,113 @@
+import React, { FC } from 'react';
+import styled from 'styled-components';
+import Image from 'next/image';
+import Link from 'next/link';
+
+import { CardProps } from '../card/Card';
+import Typography from '../typography';
+import { InstallationType } from '../../types';
+import k3dLogo from '../../assets/k3d_logo.svg';
+import awsLogo from '../../assets/aws_logo.svg';
+import civoLogo from '../../assets/civo_logo.svg';
+import digitalOceanLogo from '../../assets/digital_ocean_logo.svg';
+import vultrLogo from '../../assets/vultr_logo.svg';
+import Tag from '../tag/Tag';
+
+import {
+  CardContainer,
+  DetailsContainer,
+  LinkContent,
+  LabelContainer,
+} from './CloudProviderCard.styled';
+
+const PROVIDER_OPTIONS: Record<
+  InstallationType,
+  {
+    logoSrc: any;
+    label: string;
+    description: string;
+    height: number;
+    width: number;
+    learnMoreLink?: string;
+    beta?: boolean;
+  }
+> = {
+  [InstallationType.LOCAL]: {
+    logoSrc: k3dLogo,
+    label: 'Run Locally',
+    description:
+      'The fastest way to explore all you can do with Kubefirst. Run Kubefirst for free on a local K3D cluster in less than 5 minutes - without any cloud costs or domain prerequisites.',
+    height: 88,
+    width: 50,
+  },
+  [InstallationType.AWS]: {
+    logoSrc: awsLogo,
+    label: 'AWS',
+    description:
+      'Our AWS cloud platform can accommodate all of the needs of your enterprise and leverages the free Github system at github.com.',
+    height: 30,
+    width: 50,
+  },
+  [InstallationType.CIVO]: {
+    logoSrc: civoLogo,
+    label: 'CIVO',
+    description:
+      'A powerful open source cloud native tool set for identity and infrastructure management, application delivery, and secrets managament.',
+    height: 17,
+    width: 50,
+  },
+  [InstallationType.DIGITAL_OCEAN]: {
+    logoSrc: digitalOceanLogo,
+    label: 'Digital Ocean',
+    description:
+      'A powerful open source cloud native tool set for identity and infrastructure management, application delivery, and secrets managament.',
+    height: 50,
+    width: 50,
+    beta: true,
+  },
+  [InstallationType.VULTR]: {
+    logoSrc: vultrLogo,
+    label: 'Vultr',
+    description:
+      'A powerful open source cloud native tool set for identity and infrastructure management, application delivery, and secrets managament.',
+    learnMoreLink: '#',
+    height: 43,
+    width: 50,
+    beta: true,
+  },
+};
+
+export interface CloudProviderCardProps extends CardProps {
+  option: InstallationType;
+  active?: boolean;
+}
+
+const CloudProviderCard: FC<CloudProviderCardProps> = ({
+  option,
+  withHoverEffect = true,
+  ...rest
+}) => {
+  const { logoSrc, label, description, learnMoreLink, height, width, beta } =
+    PROVIDER_OPTIONS[option];
+  return (
+    <CardContainer {...rest} withHoverEffect={withHoverEffect}>
+      <Image src={logoSrc} alt="logo" width={width} height={height} />
+      <DetailsContainer>
+        <LabelContainer>
+          <Typography variant="subtitle2">{label}</Typography>
+          {beta && <Tag text="BETA" bgColor="light-orange" />}
+        </LabelContainer>
+        <Typography variant="body2">
+          {description}
+          {learnMoreLink && (
+            <Link href={learnMoreLink}>
+              <LinkContent> Learn More</LinkContent>
+            </Link>
+          )}
+        </Typography>
+      </DetailsContainer>
+    </CardContainer>
+  );
+};
+
+export default styled(CloudProviderCard)``;

components/gitProviderButton/GitProviderButton.stories.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Story } from '@storybook/react';
+
+import { GitProvider } from '../../types';
+
+import GitProviderButton, { GitProviderButtonProps } from './GitProviderButton';
+
+export default {
+  title: 'Components/GitProviderButton',
+  component: GitProviderButton,
+  argTypes: {
+    option: {
+      control: 'select',
+      options: GitProvider,
+      defaultValue: GitProvider.GITHUB,
+    },
+    active: {
+      control: 'boolean',
+      defaultValue: false,
+    },
+  },
+};
+
+const DefaultTemplate: Story<GitProviderButtonProps> = (args) => <GitProviderButton {...args} />;
+
+export const Default = DefaultTemplate.bind({});

components/gitProviderButton/GitProviderButton.styled.tsx

@@ -0,0 +1,24 @@
+import styled, { css } from 'styled-components';
+
+export const Button = styled.button<{ active?: boolean }>`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 260px;
+  height: 88px;
+  border: 2px solid #e2e8f0;
+  border-radius: 8px;
+  background-color: white;
+  cursor: pointer;
+  gap: 24px;
+
+  &:hover {
+    border-color: ${({ theme }) => theme.colors.primary};
+  }
+
+  ${({ active, theme }) =>
+    active &&
+    css`
+      border-color: ${theme.colors.primary};
+    `}
+`;

components/gitProviderButton/GitProviderButton.tsx

@@ -0,0 +1,35 @@
+import React, { ComponentPropsWithoutRef, FC } from 'react';
+import styled from 'styled-components';
+import Image from 'next/image';
+
+import { GitProvider } from '../../types';
+import gitlabLogo from '../../assets/gitlab.svg';
+import githubLogo from '../../assets/github.svg';
+import Typography from '../typography';
+
+import { Button } from './GitProviderButton.styled';
+
+const PROVIDER_OPTIONS: Record<
+  GitProvider,
+  { logoSrc: any; label: string; height: number; width: number }
+> = {
+  [GitProvider.GITHUB]: { logoSrc: githubLogo, label: 'Github', height: 40, width: 40 },
+  [GitProvider.GITLAB]: { logoSrc: gitlabLogo, label: 'GitLab', height: 40, width: 42 },
+};
+
+export interface GitProviderButtonProps extends ComponentPropsWithoutRef<'button'> {
+  option: GitProvider;
+  active?: boolean;
+}
+
+const GitProviderButton: FC<GitProviderButtonProps> = ({ option, type = 'button', ...rest }) => {
+  const { logoSrc, label, height, width } = PROVIDER_OPTIONS[option];
+  return (
+    <Button {...rest} type={type}>
+      <Image src={logoSrc} alt="logo" width={width} height={height} />
+      <Typography variant="subtitle2">{label}</Typography>
+    </Button>
+  );
+};
+
+export default styled(GitProviderButton)``;

components/tag/Tag.stories.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Story } from '@storybook/react';
+
+import Tag, { TAG_COLOR_OPTIONS, TagProps } from './Tag';
+
+export default {
+  title: 'Components/Tag',
+  component: Tag,
+  argTypes: {
+    bgColor: {
+      control: 'select',
+      options: TAG_COLOR_OPTIONS,
+    },
+  },
+};
+
+const DefaultTemplate: Story<TagProps> = (args) => <Tag {...args} />;
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {
+  text: 'Tag',
+};