@edvisor/product-language 0.2.0 → 0.3.0

package/src/lib/components/icon/icon.tsx

@@ -0,0 +1,181 @@
+import { FC, is } from '@helpers'
+import styled from 'styled-components'
+import { Icons } from '@foundations'
+import { IconListMajor, IconListMinor } from './icon-list'
+import { HTMLAttributes, ReactElement } from 'react'
+import { LineHeight } from 'foundations/typography/constants'
+
+interface IconProperties extends HTMLAttributes<HTMLElement> {
+  role?: string;
+  icon: ReactElement;
+  minor?: boolean;
+  className?: string;
+}
+
+const BoundingBox = styled.i`
+  width: ${LineHeight.b};
+  height: ${LineHeight.b};
+  flex: none;
+  order: 0;
+  flex-grow: 0;
+  position: relative;
+`
+
+const Svg = styled.svg<{ props: IconProperties}>`
+  position: absolute;
+  width: ${({ props }) => is(props.minor) ? '17px' : LineHeight.b};
+  height: ${({ props }) => is(props.minor) ? '17px' : LineHeight.b};
+  fill: none;
+  top: calc(50% - ${({ props }) => is(props.minor) ? '17px' : LineHeight.b}/2);
+  left: calc(50% - ${({ props }) => is(props.minor) ? '17px' : LineHeight.b}/2);
+  path {
+    fill: ${Icons.Default};
+  }
+`
+
+Svg.defaultProps = {
+  viewBox: '0 0 20 20',
+  role: 'icon',
+  'aria-label': 'icon',
+}
+
+const ProductLanguageIcon: FC<IconProperties> = (props) => (
+  <BoundingBox {...props}>
+    <Svg
+      props={props}>
+      {props.icon}
+    </Svg>
+  </BoundingBox>
+)
+
+export const Icon = {
+  ArrowsUpDownLeftRight: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['arrows-up-down-left-right']} />,
+  BadgePercent: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['badge-percent']} />,
+  Bell: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['bell']} />,
+  Book: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['book']} />,
+  BoxArchive: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['box-archive']} />,
+  BuildingColumns: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['building-columns']} />,
+  Building: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['building']} />,
+  BullseyeArrow: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['bullseye-arrow']} />,
+  Calculator: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['calculator']} />,
+  CalendarDay: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['calendar-day']} />,
+  ChartLine: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['chart-line']} />,
+  Check: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['check']}  />,
+  CircleCheck: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['circle-check']} />,
+  CircleInfo: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['circle-info']} />,
+  CircleQuestion: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['circle-question']} />,
+  ClipboardCheck: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['clipboard-check']} />,
+  CommentLines: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['comment-lines']} />,
+  DiamondExclamation: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['diamond-exclamation']} />,
+  Envelope: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['envelope']} />,
+  Eye: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['eye']} />,
+  EyeSlash: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['eye-slash']} />,
+  FileCertificate: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['file-certificate']} />,
+  FileChartColumn: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['file-chart-column']} />,
+  FileInvoiceDollar: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['file-invoice-dollar']} />,
+  FileLines: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['file-lines']} />,
+  Gear: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['gear']} />,
+  GraduationCap: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['graduation-cap']} />,
+  House: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['house']} />,
+  MagnifyingGlass: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['magnifying-glass']} />,
+  PaperPlaneTop: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['paper-plane-top']} />,
+  SchoolFlag: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['school-flag']} />,
+  ShieldPlus: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['shield-plus']} />,
+  Store: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['store']} />,
+  Suitcase: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['suitcase']} />,
+  Tag: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['tag']} />,
+  BedFront: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['bed-front']} />,
+  TriangleExclamation: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['triangle-exclamation']} />,
+  UserGroup: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['user-group']} />,
+  User: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['user']} />,
+  Wrench: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['wrench']} />,
+  XmarkLarge: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['xmark-large']} />,
+}
+
+export const IconMinor = {
+  ArrowDownToLine: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['arrow-down-to-line']} minor/>,
+  ArrowLeft: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['arrow-left']} minor/>,
+  ArrowRightFromBracket: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['arrow-right-from-bracket']} minor />,
+  ArrowRight: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['arrow-right']} minor />,
+  ArrowUpArrowDown: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['arrow-up-arrow-down']} minor />,
+  ArrowUpFromLine: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['arrow-up-from-line']} minor />,
+  ArrowUpRightFromSquare: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['arrow-up-right-from-square-regular']} minor />,
+  BadgeCheck: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['badge-check']} minor />,
+  BadgePercent: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['badge-percent']} minor />,
+  Ban: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['ban']} minor />,
+  BarsFilter: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['bars-filter']} minor />,
+  Bars: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['bars']} minor />,
+  BedFront: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['bed-front']} minor />,
+  Bold: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['bold']} minor />,
+  Bookmark: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['bookmark']} minor />,
+  Book: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['book']} minor />,
+  Calendar: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['calendar']} minor />,
+  Campground: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['campground']} minor />,
+  CartShopping: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['cart-shopping']} minor />,
+  ChartPieSimple: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['chart-pie-simple']} minor />,
+  Check: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['check']} minor />,
+  ChevronDownSolid: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['chevron-down-solid']} minor />,
+  ChevronLeftSolid: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['chevron-left-solid']} minor />,
+  ChevronRightSolid: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['chevron-right-solid']} minor />,
+  ChevronUpSolid: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['chevron-up-solid']} minor />,
+  CircleDollar: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['circle-dollar']} minor />,
+  CircleExclamation: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['circle-exclamation']} minor />,
+  CircleInfo: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['circle-info']} minor />,
+  CircleSmall: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['circle-small']} minor />,
+  Clock: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['clock']} minor />,
+  Clone: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['clone']} minor />,
+  Comment: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['comment']} minor />,
+  CreditCard: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['credit-card']} minor />,
+  Desktop: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['desktop']} minor />,
+  EllipsisVertical: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['ellipsis-vertical']} minor />,
+  Envelope: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['envelope']} minor />,
+  Eye: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['eye']} minor />,
+  EyeSlash: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['eye-slash']} minor />,
+  Facebook: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['facebook']} minor />,
+  FireBurner: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['fire-burner']} minor />,
+  Fire: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['fire']} minor />,
+  Folder: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['folder']} minor />,
+  FolderOpen: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['folder-open']} minor />,
+  GraduationCap: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['graduation-cap']} minor />,
+  H1: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['h1']} minor />,
+  Heart: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['heart']} minor />,
+  HeartSolid: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['heart-solid']} minor />,
+  Instagram: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['instagram']} minor />,
+  Italic: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['italic']} minor />,
+  Link: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['link']} minor />,
+  ListOl: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['list-ol']} minor />,
+  ListUl: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['list-ul']} minor />,
+  LocationDot: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['location-dot']} minor />,
+  Lock: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['lock']} minor />,
+  Loveseat: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['loveseat']} minor />,
+  MagnifyingGlass: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['magnifying-glass']} minor />,
+  Minus: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['minus']} minor />,
+  MugTea: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['mug-tea']} minor />,
+  Paperclip: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['paperclip']} minor />,
+  Pen: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['pen']} minor />,
+  PersonPraying: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['person-praying']} minor />,
+  PlaneArrival: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['plane-arrival']} minor />,
+  PlaneDeparture: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['plane-departure']} minor />,
+  Plus: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['plus']} minor />,
+  Print: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['print']} minor />,
+  RotateLeft: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['rotate-left']} minor />,
+  RotateRight: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['rotate-right']} minor />,
+  School: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['school']} minor />,
+  ShareNodes: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['share-nodes']} minor />,
+  ShieldPlus: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['shield-plus']} minor />,
+  Spinner: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['spinner']} minor />,
+  Star: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['star']} minor />,
+  StarSolid: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['star-solid']} minor />,
+  Strikethrough: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['strikethrough']} minor />,
+  TableTennisPaddleBall: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['table-tennis-paddle-ball']} minor />,
+  TrashCan: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['trash-can']} minor />,
+  Twitter: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['twitter']} minor />,
+  Underline: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['underline']} minor />,
+  User: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['user']} minor />,
+  Utensils: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['utensils']} minor />,
+  Whatsapp: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['whatsapp']} minor />,
+  Wheelchair: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['wheelchair']} minor />,
+  Wifi: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['wifi']} minor />,
+  Xmark: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['xmark']} minor />,
+  Youtube: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['youtube']} minor />,
+}

package/src/lib/components/icon/index.tsx

@@ -0,0 +1 @@
+export * from './icon'

package/src/lib/components/icon/stories/components.tsx

@@ -0,0 +1,282 @@
+import { Borders, Focused, Interactive, Surface } from 'foundations/color-system'
+import { Margin, Padding } from 'foundations/spacing'
+import { Typography } from '@foundations'
+import { StoryComponent } from '@stories'
+import styled from 'styled-components'
+import { Icon, IconMinor } from  '../icon'
+import { Body } from 'components/typography'
+import { ReactNode } from 'react'
+import { Playground } from 'storybook-addon-jarle-monaco'
+import { Button } from 'components/molecules'
+import { InputField } from 'components/input-field'
+
+const Table = styled.div<{ children?: ReactNode }>`
+  background: ${Surface.Default};
+  border-radius: 6px;
+  width: 100%;
+`
+
+const Row = styled.div`
+  width: 25%;
+  flex-direction: row;
+  display: inline-block;
+  zoom: 1; 
+  background-color: ${Surface.Default};
+`
+
+const Column = styled.div`
+  ${Typography.Body}
+  display: flex;
+  padding: ${Padding.xxs};
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  justify-content: space-between;
+`
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  padding: ${Padding.xs};
+  gap: ${Margin.s};
+  width: 100%;
+  background: ${Surface.Default.Hover};
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  &:hover {
+    span {
+      opacity: 1;
+      z-index: 1;
+    }
+  }
+`
+
+const Span = styled.span`
+  opacity: 0;
+  transition: opacity 1s;
+  width: 120px;
+  background-color: ${Interactive.Subtle.Disabled};
+  color: ${Surface.Default.Default};
+  text-align: center;
+  padding: ${Padding.xxs} ${Padding.none};
+  border-radius: 6px;
+  position: absolute;
+  z-index: -1;
+  bottom: 105%;
+  left: 50%;
+  margin-left: -60px;
+  &:after {
+    content: " ";
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: ${Interactive.Subtle.Disabled} transparent transparent transparent;
+  }
+`
+
+const DivWrapper = styled.div`
+  display: flex;
+  gap: 15px;
+  margin: ${Margin.l} 0;
+`
+
+const getObjectKey = (o: object) => Object.keys(o)[0]
+const getObjectValue = (o: object) => Object.values(o)[0]
+const getIconList = (o: object) => Object.entries(o).map(([key, value]) => ({ [key]: value }))
+
+export const IconTable: StoryComponent = () => {
+  const icons = getIconList(Icon)
+  return (
+    <Table>
+      {
+        icons.map((icon, index) =>
+          <Row key={index}>
+            <Column>
+              <Wrapper onClick={() => {navigator.clipboard.writeText(`<Icon.${getObjectKey(icon)} />`)}}>
+                <Span >Copy me!</Span>
+                {getObjectValue(icon)()}
+                <Body>{getObjectKey(icon)}</Body>
+              </Wrapper>
+            </Column>
+          </Row>
+        )
+      }
+    </Table>
+  )
+}
+
+export const IconMinorTable: StoryComponent = () => {
+  const icons = getIconList(IconMinor)
+  return (
+    <Table>
+      {
+        icons.map((icon, index) =>
+        <Row key={index}>
+            <Column>
+              <Wrapper onClick={() => {navigator.clipboard.writeText(`<IconMinor.${getObjectKey(icon)} />`)}}>
+                <Span>Copy me!</Span>
+                {getObjectValue(icon)()}
+                <Body>{getObjectKey(icon)}</Body>
+              </Wrapper>
+            </Column>
+          </Row>
+        )
+      }
+    </Table>
+  )
+}
+
+export const IconCodeExample = () => (
+  <Playground
+    code={`
+      // Try replacing the 'BuildingColumns' for another from the Icon list.
+      <Icon.BuildingColumns />
+    `}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        Icon,
+        DivWrapper,
+      },
+    }}
+  />
+)
+
+export const IconButtonCodeExample = () => (
+  <Playground
+    code={`
+      // Try replacing the Button Type or the Icon name.
+      <div>
+        <DivWrapper>
+          <Icon.BuildingColumns />
+          <Icon.BullseyeArrow />
+        </DivWrapper>
+        <DivWrapper>
+          <Button IconPrefix={IconMinor.CircleInfo}>Basic</Button>
+          <Button primary IconPrefix={IconMinor.FolderOpen}>Primary</Button>
+          <Button destructive IconPrefix={IconMinor.School}>Destructive</Button>
+          <Button destructive primary IconPrefix={IconMinor.PlaneArrival}>Destructive Primary</Button>
+          <Button outline IconPrefix={IconMinor.PlaneDeparture}>Outline</Button>
+          <Button plain IconPrefix={IconMinor.BadgeCheck}>Plain</Button>
+          <Button plain subtle IconPrefix={IconMinor.Fire}>Plain Subtle</Button>
+        </DivWrapper>
+        <div>
+          <label htmlFor="input_example">I can have Icons too!</label>
+          <InputField name="input_example!">
+            <InputField.Icon>
+              <IconMinor.CreditCard title="Icons render before the input" />
+            </InputField.Icon>
+            <InputField.Controls>
+              <IconMinor.CreditCard title="Controls render after the input" />
+            </InputField.Controls>
+          </InputField>
+        </div>
+      </div>
+    `}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        Icon,
+        IconMinor,
+        Button,
+        InputField,
+        DivWrapper,
+      },
+    }}
+  />
+)
+
+const Select = styled.select`
+  padding: ${Padding.xs} ${Padding.m};
+  border: 1px solid ${Borders.Default.Default};
+  border-radius: 6px;
+  gap: 8px;
+  background: ${Surface.Default.Default};
+  width: 150px;
+  font-family: 'Inter';
+  font-weight: 300;
+  font-size: 14px;
+  line-height: 20px;
+  height: 40px;
+  margin: ${Margin.m};
+
+  &:focus  {
+    outline: 1px solid ${Focused.Default}
+  }
+
+  &:focus-visible  {
+    border: 1px solid ${Focused.Default}
+  }
+`
+
+export const ChangeIconColor = () => (
+  <Playground
+    code={`
+      // Try replacing the Button Type or the Icon name.
+
+      const [color, setColor] = useState('gray');
+      
+      const ColorfullBuildingColumns = styled(Icon.BuildingColumns)<{color: string}>\`
+        path {
+          fill: \${({ color }) => color};
+        }
+      \`;
+      
+      const ColorfullBullseyeArrow = styled(Icon.BullseyeArrow)<{color: string}>\`
+        path {
+          fill: \${({ color }) => color};
+        }
+      \`;
+
+      const ColorfullYouTube = styled(IconMinor.Youtube)<{color: string}>\`
+        path {
+          fill: \${({ color }) => color};
+        }
+      \`;
+
+      const ColorfullTwitter = styled(IconMinor.Twitter)<{color: string}>\`
+        path {
+          fill: \${({ color }) => color};
+        }
+      \`;
+
+      const ColorfullTriangleExclamation = styled(Icon.TriangleExclamation)<{color: string}>\`
+        path {
+          fill: \${({ color }) => color};
+        }
+      \`;
+
+      <div style={{display:'flex', gap:'8px'}}>
+        <Select onChange={(e) => setColor(e.target.value)}>
+          <option value='gray'>Gray</option>
+          <option value='red'>Red</option>
+          <option value='blue'>Blue</option>
+          <option value='orange'>Orange</option>
+          <option value='green'>Green</option>
+          <option value='magenta'>Magenta</option>
+        </Select>
+        <DivWrapper>
+          <ColorfullBuildingColumns color={color}/>
+          <ColorfullBullseyeArrow color={color}/>
+          <ColorfullYouTube color={color}/>
+          <ColorfullTwitter color={color}/>
+          <ColorfullTriangleExclamation color={color}/>
+        </DivWrapper>
+      </div>
+    `}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        Icon,
+        IconMinor,
+        styled,
+        Select,
+        DivWrapper,
+      },
+    }}
+  />
+)

package/src/lib/components/icon/stories/icon.stories.mdx

@@ -0,0 +1,65 @@
+import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
+import { Icon, IconMinor } from '../index'
+import { IconTable, IconMinorTable, IconCodeExample, IconButtonCodeExample, ChangeIconColor } from './components'
+import { Button } from 'components/molecules/button'
+
+<Meta title="Components/Icon" />
+
+# Icon System
+
+### Table of Contents
+1. [How to use](#how-to-use)
+2. [Icon vs IconMinor](#icon-vs-iconMinor)
+3. [Major Icons](#major-icons)
+4. [Minor Icons](#minor-icons)
+5. [Inside Inputs and Buttons](#in-other-components)
+6. [Changing Icon Color](#changing-olor)
+
+
+For more details, check out the guidelines on [Figma](https://www.figma.com/file/ue1CurHfZ426o2T2l8Dk64/Edvisor-Product-Language?node-id=997%3A478)
+
+<div id="how-to-use"/>
+
+## How to Use
+```tsx
+import { Icon, IconMinor } from './index'
+
+<Icon.Check />
+<IconMinor.Check />
+```
+
+<div id="icon-vs-iconMinor" />
+
+## Icon vs IconMinor
+The Icon uses the major Icons whilst the IconMinor Uses the Minor Icons (see list below).
+<Canvas>
+    <Icon.Check />
+    <IconMinor.Check />
+</Canvas>
+
+
+<div id="major-icons" />
+
+## Major icons
+Generally used for primary and secondary navigation. 20x20 bounding box. Rendered at 20x20.
+
+<IconTable/>
+
+<div id="minor-icons" />
+
+## Minor icons
+Generally used for buttons, form elements, and to support text. 20x20 bounding box. Rendered at 17x17.
+
+<IconMinorTable/>
+
+
+<div id="in-other-components" />
+
+## Inside Inputs and Buttons
+<IconButtonCodeExample />
+
+<div id="changing-olor" />
+
+## Changing Icon Color
+You can change the color using styled components, setting the fill property of the path.
+<ChangeIconColor/>

package/src/lib/components/index.ts

@@ -6,8 +6,13 @@ export * from './divider'
 export * from './input-field'
 export * from './layout'
 export * from './link'
+export * from './tag'
 export * from './thumbnail'
 export * from './typography'
+export * from './tabs'
+export * from './icon'
+export * from './flag'
+export * from './spinner'
 
 //Adding everything in molecules
 export * from './molecules'

package/src/lib/components/input-field/components/labeled-input.tsx

@@ -3,25 +3,15 @@ import styled from 'styled-components'
 import { Icons, Margin } from '@foundations'
 import { PropsWithChildren, FC, maybeRender, safeArray } from '@helpers'
 import { Flex } from 'components/layout'
-import { Body, Label1 } from 'components/typography'
-
-export const Icon = styled.div`
-  height: 16px;
-  width: 16px;
-  border: 2px solid ${Icons.Default};
-  border-radius: 50%;
-  margin-right: ${Margin.s};
-`
+import { Body, Label } from 'components/typography'
+import { IconMinor } from 'components/icon'
 
-const ErrorIcon = styled(Icon)`
-  border: 2px solid ${Icons.Critical};
-`
 
 const HTMLLabel = styled.label`
   all: unset;
 `
 
-const LabelText = styled(Label1)`
+const LabelText = styled(Label)`
   margin-bottom: ${Margin.xxs};
 `
 
@@ -31,6 +21,9 @@ const HelpText = styled(Body)`
 
 const ErrorMessage = styled(Flex)`
   margin-bottom: ${Margin.xxs};
+  & path {
+    fill: ${Icons.Warning};
+  }
 `
 
 interface ILabeledInputProps extends PropsWithChildren {
@@ -48,7 +41,7 @@ export const LabeledInput: FC<ILabeledInputProps> = (props) => {
       </label>
       {safeArray(props.errors).map((e) => (
         <ErrorMessage center key={e.message}>
-          <ErrorIcon />
+          <IconMinor.CircleExclamation />
           <Body>{e.message}</Body>
         </ErrorMessage>
       ))}

package/src/lib/components/input-field/components/stepper.tsx

@@ -1,4 +1,4 @@
-import { Margin, Padding, Surface } from '@foundations'
+import { Margin, Padding, Surface, Icons } from '@foundations'
 import { FC } from '@helpers'
 import { Center } from 'components/layout'
 import styled from 'styled-components'
@@ -19,6 +19,7 @@ const Up = styled(Center)`
   display: flex;
   align-items: center;
   justify-content: center;
+  margin-top: ${Margin.xs}
 `
 
 const TriangleUp = styled.div`
@@ -26,7 +27,7 @@ const TriangleUp = styled.div`
   height: 0px;
   border-left: 5px solid transparent;
   border-right: 5px solid transparent;
-  border-bottom: 5px solid black;
+  border-bottom: 5px solid ${Icons.Default};
 `
 
 const TriangleDown = styled.div`
@@ -34,7 +35,7 @@ const TriangleDown = styled.div`
   height: 0px;
   border-left: 5px solid transparent;
   border-right: 5px solid transparent;
-  border-top: 5px solid black;
+  border-top: 5px solid ${Icons.Default};
 `
 
 const Down = styled(Center)`

package/src/lib/components/input-field/input-field.test.tsx

@@ -1,4 +1,5 @@
-import {fireEvent, render, screen } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 import { InputField } from './index'
 
 describe('InputField', () => {
@@ -24,11 +25,9 @@ describe('InputField', () => {
 
       render(<InputField value="value" onChange={handleChange} />)
 
-      fireEvent.change(screen.getByRole('textbox'), {
-        target: { value: 'JavaScript' },
-      })
-  
-      expect(handleChange).toHaveBeenCalledTimes(1)
+      await userEvent.type(screen.getByRole('textbox'), 'hello')
+
+      expect(handleChange).toHaveBeenCalledTimes(5)
     })
   })