@marigold/icons 0.0.2 → 0.3.0

package/src/Icons.stories.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
 import {
   Cancel,
   Crop,
@@ -106,389 +106,1169 @@ import {
   Twitter,
   Whatsapp,
 } from '@marigold/icons';
+import {
+  Box,
+  Column,
+  Columns,
+  Container,
+  Stack,
+  Text,
+} from '@marigold/components';
 
-<Meta title="Icons" />
-
-# Marigold Icons
-
-## Description
-
-With the Icon component you can render one of the icons below.
-By adding the `size` prop you can change to another size. `24` is the default size.
-The `fill` prop is the second attribute and per default `currentcolor`.
-Specific css style prop can also be added.
-
-## Properties
-
-| Property | Type     | Default          |
-| :------- | :------- | :--------------- |
-| `size`   | `number` | `24`             |
-| `fill`   | `string` | `'currentcolor'` |
-
-## Import
-
-```tsx
-import { Google } from '@marigold/icons';
-```
-
-## Usage
-
-<Preview>
-  <Story name="sizeProp">
-    <DesignTicket size={40} />
-  </Story>
-  <Story name="sizeFillProp">
-    <DesignTicket size={32} fill="red" />
-  </Story>
-  <Story name="fillProp">
-    <DesignTicket fill="#E6DC16" />
-  </Story>
-</Preview>
-
-### UI-Icons
+<Meta
+  title="Tokens/Marigold Icons"
+  argTypes={{
+    size: {
+      control: {
+        type: 'number',
+      },
+      description: 'Size of the squared icon',
+      table: {
+        defaultValue: {
+          summary: 24,
+        },
+      },
+    },
+    fill: {
+      control: {
+        type: 'text',
+      },
+      description: 'Color of the icon',
+      table: {
+        defaultValue: {
+          summary: 'currentcolor',
+        },
+      },
+    },
+  }}
+/>
 
-<Preview>
-  <Story name="ArrowUpA-icon">
-    <ArrowUpA />
-  </Story>
-  <Story name="ArrowRightA-icon">
-    <ArrowRightA />
-  </Story>
-  <Story name="ArrowDownA-icon">
-    <ArrowDownA />
-  </Story>
-  <Story name="ArrowLeftA-icon">
-    <ArrowLeftA />
-  </Story>
-  <Story name="SettingDots-icon">
-    <SettingDots />
-  </Story>
-  <Story name="Check-icon">
-    <Check />
-  </Story>
-  <Story name="Add-icon">
-    <Add />
-  </Story>
-  <Story name="Remove-icon">
-    <Remove />
-  </Story>
-  <Story name="ArrowUp-icon">
-    <ArrowUp />
-  </Story>
-  <Story name="ArrowRight-icon">
-    <ArrowRight />
-  </Story>
-  <Story name="ArrowDown-icon">
-    <ArrowDown />
-  </Story>
-  <Story name="ArrowLeft-icon">
-    <ArrowLeft />
-  </Story>
-  <Story name="IconMore-icon">
-    <IconMore />
-  </Story>
-  <Story name="Search-icon">
-    <Search />
-  </Story>
-  <Story name="SquareUnchecked-icon">
-    <SquareUnchecked />
-  </Story>
-  <Story name="SquareChecked-icon">
-    <SquareChecked />
-  </Story>
-  <Story name="ExternalLink-icon">
-    <ExternalLink />
-  </Story>
-  <Story name="Filter-icon">
-    <Filter />
-  </Story>
-  <Story name="BurgerMenu-icon">
-    <BurgerMenu />
-  </Story>
-  <Story name="Delete-icon">
-    <Delete />
-  </Story>
-  <Story name="Close-icon">
-    <Close />
-  </Story>
-  <Story name="CircleUnchecked-icon">
-    <CircleUnchecked />
-  </Story>
-  <Story name="CircleChecked-icon">
-    <CircleChecked />
-  </Story>
-</Preview>
+# Icons
 
-### Info-Icons
+export const Template = args => <ArrowUpA {...args} />;
 
-<Preview>
-  <Story name="Accessible-icon">
-    <Accessible />
-  </Story>
-  <Story name="AutoRenew-icon">
-    <AutoRenew />
-  </Story>
-  <Story name="Banned-icon">
-    <Banned />
-  </Story>
-  <Story name="Bus-icon">
-    <Bus />
-  </Story>
-  <Story name="Calendar-icon">
-    <Calendar />
-  </Story>
-  <Story name="Camera-icon">
-    <Camera />
-  </Story>
-  <Story name="Clock-icon">
-    <Clock />
-  </Story>
-  <Story name="Direction-icon">
-    <Direction />
-  </Story>
-  <Story name="Email-icon">
-    <Email />
-  </Story>
-  <Story name="EventDate-icon">
-    <EventDate />
-  </Story>
-  <Story name="Exclamation-icon">
-    <Exclamation />
-  </Story>
-  <Story name="Feedback-icon">
-    <Feedback />
-  </Story>
-  <Story name="Food-icon">
-    <Food />
-  </Story>
-  <Story name="Globe-icon">
-    <Globe />
-  </Story>
-  <Story name="Home-icon">
-    <Home />
-  </Story>
-  <Story name="Info-icon">
-    <Info />
-  </Story>
-  <Story name="Marker-icon">
-    <Marker />
-  </Story>
-  <Story name="MobilePhone-icon">
-    <MobilePhone />
-  </Story>
-  <Story name="Notification-icon">
-    <Notification />
-  </Story>
-  <Story name="Parking-icon">
-    <Parking />
-  </Story>
-  <Story name="Phone-icon">
-    <Phone />
-  </Story>
-  <Story name="Print-icon">
-    <Print />
-  </Story>
-  <Story name="Required-icon">
-    <Required />
-  </Story>
-  <Story name="ResaleLogbook-icon">
-    <ResaleLogbook />
-  </Story>
-  <Story name="Spinner-icon">
-    <Spinner />
-  </Story>
-  <Story name="ResaleLogbook-icon">
-    <ResaleLogbook />
-  </Story>
-  <Story name="Thumb-icon">
-    <Thumb />
-  </Story>
-  <Story name="Truck-icon">
-    <Truck />
-  </Story>
-</Preview>
+<Canvas>
+  <Story name="Example">{Template.bind({})}</Story>
+</Canvas>
 
-### Action-Icons
+<ArgsTable story="Example" />
 
-<Preview>
-  <Story name="Cancel-icon">
-    <Cancel />
-  </Story>
-  <Story name="Crop-icon">
-    <Crop />
-  </Story>
-  <Story name="Edit-icon">
-    <Edit />
-  </Story>
-  <Story name="FormatBold-icon">
-    <FormatBold />
-  </Story>
-  <Story name="FormatItalic-icon">
-    <FormatItalic />
-  </Story>
-  <Story name="FormatSize-icon">
-    <FormatSize />
-  </Story>
-  <Story name="HighlightOff-icon">
-    <HighlightOff />
-  </Story>
-  <Story name="Image-icon">
-    <Image />
-  </Story>
-  <Story name="Location-icon">
-    <Location />
-  </Story>
-  <Story name="Lock-icon">
-    <Lock />
-  </Story>
-  <Story name="LockOpen-icon">
-    <LockOpen />
-  </Story>
-  <Story name="Pause-icon">
-    <Pause />
-  </Story>
-  <Story name="PauseAlt-icon">
-    <PauseAlt />
-  </Story>
-  <Story name="Play-icon">
-    <Play />
-  </Story>
-  <Story name="PlayAlt-icon">
-    <PlayAlt />
-  </Story>
-  <Story name="ResaleEdit-icon">
-    <ResaleEdit />
-  </Story>
-  <Story name="RotateLeft-icon">
-    <RotateLeft />
-  </Story>
-  <Story name="RotateRight-icon">
-    <RotateRight />
-  </Story>
-  <Story name="Save-icon">
-    <Save />
-  </Story>
-  <Story name="Sort-icon">
-    <Sort />
-  </Story>
-  <Story name="SortDown-icon">
-    <SortDown />
-  </Story>
-  <Story name="SortUp-icon">
-    <SortUp />
-  </Story>
-  <Story name="Star-icon">
-    <Star />
-  </Story>
-  <Story name="Stop-icon">
-    <Stop />
-  </Story>
-  <Story name="Underlined-icon">
-    <Underlined />
-  </Story>
-  <Story name="Zoom-icon">
-    <Zoom />
-  </Story>
-</Preview>
+### UI
 
-### Ticketing-Icons
+<Canvas>
+  <Story name="UI">
+    <Columns space={8}>
+      <Column width={4}>
+        <Text as="h2" variant="headline2">
+          UI
+        </Text>
+        <Box
+          as={Container}
+          bg="white"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>ArrowUpA</Text>
+          <ArrowUpA />
+        </Box>
+        <Box
+          as={Container}
+          bg="#e9e7eb"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>ArrowRightA</Text>
+          <ArrowRightA />
+        </Box>
+        <Box
+          as={Container}
+          bg="white"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>ArrowDownA</Text>
+          <ArrowDownA />
+        </Box>
+        <Box
+          as={Container}
+          bg="#e9e7eb"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>ArrowLeftA</Text>
+          <ArrowLeftA />
+        </Box>
+        <Box
+          as={Container}
+          bg="white"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>SettingDots</Text>
+          <SettingDots />
+        </Box>
+        <Box
+          as={Container}
+          bg="#e9e7eb"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>Check</Text>
+          <Check />
+        </Box>
+        <Box
+          as={Container}
+          bg="white"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>Add</Text>
+          <Add />
+        </Box>
+      </Column>
+      <Column width={4}>
+        <Box
+          as={Container}
+          bg="#e9e7eb"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>Remove</Text>
+          <Remove />
+        </Box>
+        <Box
+          as={Container}
+          bg="white"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>ArrowUp</Text>
+          <ArrowUp />
+        </Box>
+        <Box
+          as={Container}
+          bg="#e9e7eb"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>ArrowRight</Text>
+          <ArrowRight />
+        </Box>
+        <Box
+          as={Container}
+          bg="white"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>ArrowDown</Text>
+          <ArrowDown />
+        </Box>
+        <Box
+          as={Container}
+          bg="#e9e7eb"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>ArrowLeft</Text>
+          <ArrowLeft />
+        </Box>
+        <Box
+          as={Container}
+          bg="white"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>IconMore</Text>
+          <IconMore />
+        </Box>
+        <Box
+          as={Container}
+          bg="#e9e7eb"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>Search</Text>
+          <Search />
+        </Box>
+        <Box
+          as={Container}
+          bg="white"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>SquareUnchecked</Text>
+          <SquareUnchecked />
+        </Box>
+      </Column>
+      <Column width={4}>
+        <Box
+          as={Container}
+          bg="#e9e7eb"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>SquareChecked</Text>
+          <SquareChecked />
+        </Box>
+        <Box
+          as={Container}
+          bg="white"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>ExternalLink</Text>
+          <ExternalLink />
+        </Box>
+        <Box
+          as={Container}
+          bg="#e9e7eb"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>Filter</Text>
+          <Filter />
+        </Box>
+        <Box
+          as={Container}
+          bg="white"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>BurgerMenu</Text>
+          <BurgerMenu />
+        </Box>
+        <Box
+          as={Container}
+          bg="#e9e7eb"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>Delete</Text>
+          <Delete />
+        </Box>
+        <Box
+          as={Container}
+          bg="white"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>Close</Text>
+          <Close />
+        </Box>
+        <Box
+          as={Container}
+          bg="#e9e7eb"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>CircleUnchecked</Text>
+          <CircleUnchecked />
+        </Box>
+        <Box
+          as={Container}
+          bg="white"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>CircleChecked</Text>
+          <CircleChecked />
+        </Box>
+      </Column>
+    </Columns>
+  </Story>
+</Canvas>
 
-<Preview>
-  <Story name="Deal-icon">
-    <Deal />
-  </Story>
-  <Story name="DesignTicket-icon">
-    <DesignTicket />
-  </Story>
-  <Story name="GiftCard-icon">
-    <GiftCard />
-  </Story>
-  <Story name="Membership-icon">
-    <Membership />
-  </Story>
-  <Story name="Pickup-icon">
-    <Pickup />
-  </Story>
-  <Story name="Price-icon">
-    <Price />
-  </Story>
-  <Story name="Resale-icon">
-    <Resale />
-  </Story>
-  <Story name="Scanner-icon">
-    <Scanner />
-  </Story>
-  <Story name="Seat-icon">
-    <Seat />
-  </Story>
-  <Story name="Selling-icon">
-    <Selling />
-  </Story>
-  <Story name="Ticket-icon">
-    <Ticket />
-  </Story>
-  <Story name="TicketInsurance-icon">
-    <TicketInsurance />
-  </Story>
-  <Story name="Turnstile-icon">
-    <Turnstile />
-  </Story>
-</Preview>
+<Canvas>
+  <Story name="Info">
+    <Columns space={8}>
+      <Column width={4}>
+        <Text as="h2" variant="headline2">
+          Info
+        </Text>
+        <Box
+          as={Container}
+          bg="white"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>Accessible</Text>
+          <Accessible />
+        </Box>
+        <Box
+          as={Container}
+          bg="#e9e7eb"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>AutoRenew</Text>
+          <AutoRenew />
+        </Box>
+        <Box
+          as={Container}
+          bg="white"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>Banned</Text>
+          <Banned />
+        </Box>
+        <Box
+          as={Container}
+          bg="#e9e7eb"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>Bus</Text>
+          <Bus />
+        </Box>
+        <Box
+          as={Container}
+          bg="white"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>Calendar</Text>
+          <Calendar />
+        </Box>
+        <Box
+          as={Container}
+          bg="#e9e7eb"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>Camera</Text>
+          <Camera />
+        </Box>
+        <Box
+          as={Container}
+          bg="white"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>Clock</Text>
+          <Clock />
+        </Box>
+        <Box
+          as={Container}
+          bg="#e9e7eb"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>Direction</Text>
+          <Direction />
+        </Box>
+      </Column>
+      <Column width={4}>
+        <Box
+          as={Container}
+          bg="white"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>Email</Text>
+          <Email />
+        </Box>
+        <Box
+          as={Container}
+          bg="#e9e7eb"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>EventDate</Text>
+          <EventDate />
+        </Box>
+        <Box
+          as={Container}
+          bg="white"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>Exclamation</Text>
+          <Exclamation />
+        </Box>
+        <Box
+          as={Container}
+          bg="#e9e7eb"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>Feedback</Text>
+          <Feedback />
+        </Box>
+        <Box
+          as={Container}
+          bg="white"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>Food</Text>
+          <Food />
+        </Box>
+        <Box
+          as={Container}
+          bg="#e9e7eb"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>Globe</Text>
+          <Globe />
+        </Box>
+        <Box
+          as={Container}
+          bg="white"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>Home</Text>
+          <Home />
+        </Box>
+        <Box
+          as={Container}
+          bg="#e9e7eb"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>Info</Text>
+          <Info />
+        </Box>
+        <Box
+          as={Container}
+          bg="white"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>Marker</Text>
+          <Marker />
+        </Box>
+      </Column>
+      <Column width={4}>
+        <Box
+          as={Container}
+          bg="#e9e7eb"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>MobilePhone</Text>
+          <MobilePhone />
+        </Box>
+        <Box
+          as={Container}
+          bg="white"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>Notification</Text>
+          <Notification />
+        </Box>
+        <Box
+          as={Container}
+          bg="#e9e7eb"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>Parking</Text>
+          <Parking />
+        </Box>
+        <Box
+          as={Container}
+          bg="white"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>Required</Text>
+          <Required />
+        </Box>
+        <Box
+          as={Container}
+          bg="#e9e7eb"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>ResaleLogbook</Text>
+          <ResaleLogbook />
+        </Box>
+        <Box
+          as={Container}
+          bg="white"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>Spinner</Text>
+          <Spinner />
+        </Box>
+        <Box
+          as={Container}
+          bg="#e9e7eb"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>Thumb</Text>
+          <Thumb />
+        </Box>
+        <Box
+          as={Container}
+          bg="white"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>Truck</Text>
+          <Truck />
+        </Box>
+      </Column>
+    </Columns>
+  </Story>
+</Canvas>
 
-### User-Icons
+<Canvas>
+  <Story name="Action">
+    <Columns space={8}>
+      <Column width={4}>
+        <Text as="h2" variant="headline2">
+          Action
+        </Text>
+        <Box
+          as={Container}
+          bg="white"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>Cancel</Text>
+          <Cancel />
+        </Box>
+        <Box
+          as={Container}
+          bg="#e9e7eb"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>Crop</Text>
+          <Crop />
+        </Box>
+        <Box
+          as={Container}
+          bg="white"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>Edit</Text>
+          <Edit />
+        </Box>
+        <Box
+          as={Container}
+          bg="#e9e7eb"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>FormatBold</Text>
+          <FormatBold />
+        </Box>
+        <Box
+          as={Container}
+          bg="white"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>FormatItalic</Text>
+          <FormatItalic />
+        </Box>
+        <Box
+          as={Container}
+          bg="#e9e7eb"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>FormatSize</Text>
+          <FormatSize />
+        </Box>
+        <Box
+          as={Container}
+          bg="white"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>HighlightOff</Text>
+          <HighlightOff />
+        </Box>
+        <Box
+          as={Container}
+          bg="#e9e7eb"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>Image</Text>
+          <Image />
+        </Box>
+      </Column>
+      <Column width={4}>
+        <Box
+          as={Container}
+          bg="white"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>Location</Text>
+          <Location />
+        </Box>
+        <Box
+          as={Container}
+          bg="#e9e7eb"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>Lock</Text>
+          <Lock />
+        </Box>
+        <Box
+          as={Container}
+          bg="white"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>LockOpen</Text>
+          <LockOpen />
+        </Box>
+        <Box
+          as={Container}
+          bg="#e9e7eb"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>Pause</Text>
+          <Pause />
+        </Box>
+        <Box
+          as={Container}
+          bg="white"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>PauseAlt</Text>
+          <PauseAlt />
+        </Box>
+        <Box
+          as={Container}
+          bg="#e9e7eb"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>Play</Text>
+          <Play />
+        </Box>
+        <Box
+          as={Container}
+          bg="white"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>PlayAlt</Text>
+          <PlayAlt />
+        </Box>
+        <Box
+          as={Container}
+          bg="#e9e7eb"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>ResaleEdit</Text>
+          <ResaleEdit />
+        </Box>
+        <Box
+          as={Container}
+          bg="white"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>RotateLeft</Text>
+          <RotateLeft />
+        </Box>
+      </Column>
+      <Column width={4}>
+        <Box
+          as={Container}
+          bg="#e9e7eb"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>RotateRight</Text>
+          <RotateRight />
+        </Box>
+        <Box
+          as={Container}
+          bg="white"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>Save</Text>
+          <Save />
+        </Box>
+        <Box
+          as={Container}
+          bg="#e9e7eb"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>Sort</Text>
+          <Sort />
+        </Box>
+        <Box
+          as={Container}
+          bg="white"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>SortDown</Text>
+          <SortDown />
+        </Box>
+        <Box
+          as={Container}
+          bg="#e9e7eb"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>SortUp</Text>
+          <SortUp />
+        </Box>
+        <Box
+          as={Container}
+          bg="white"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>Star</Text>
+          <Star />
+        </Box>
+        <Box
+          as={Container}
+          bg="#e9e7eb"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>Stop</Text>
+          <Stop />
+        </Box>
+        <Box
+          as={Container}
+          bg="white"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>Underlined</Text>
+          <Underlined />
+        </Box>
+        <Box
+          as={Container}
+          bg="#e9e7eb"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>Zoom</Text>
+          <Zoom />
+        </Box>
+      </Column>
+    </Columns>
+  </Story>
+</Canvas>
 
-<Preview>
-  <Story name="User-icon">
-    <User />
-  </Story>
-  <Story name="Group-icon">
-    <Group />
-  </Story>
-  <Story name="Cart-icon">
-    <Cart />
-  </Story>
-  <Story name="CreditCard-icon">
-    <CreditCard />
-  </Story>
-  <Story name="SmilieVerySatisfied-icon">
-    <SmilieVerySatisfied />
-  </Story>
-  <Story name="SmilieSatisfied-icon">
-    <SmilieSatisfied />
-  </Story>
-  <Story name="SmilieNeutral-icon">
-    <SmilieNeutral />
-  </Story>
-  <Story name="SmilieDissatisfied-icon">
-    <SmilieDissatisfied />
-  </Story>
-  <Story name="SmilieVeryDissatisfied-icon">
-    <SmilieVeryDissatisfied />
-  </Story>
-  <Story name="Id-icon">
-    <Id />
-  </Story>
-</Preview>
+<Canvas>
+  <Story name="Ticketing">
+    <Columns space={8}>
+      <Column width={4}>
+        <Text as="h2" variant="headline2">
+          Ticketing
+        </Text>
+        <Box
+          as={Container}
+          bg="white"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>Deal</Text>
+          <Deal />
+        </Box>
+        <Box
+          as={Container}
+          bg="#e9e7eb"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>DesignTicket</Text>
+          <DesignTicket />
+        </Box>
+        <Box
+          as={Container}
+          bg="white"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>GiftCard</Text>
+          <GiftCard />
+        </Box>
+        <Box
+          as={Container}
+          bg="#e9e7eb"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>Membership</Text>
+          <Membership />
+        </Box>
+        <Box
+          as={Container}
+          bg="white"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>Pickup</Text>
+          <Pickup />
+        </Box>
+        <Box
+          as={Container}
+          bg="#e9e7eb"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>Price</Text>
+          <Price />
+        </Box>
+      </Column>
+      <Column width={4}>
+        <Box
+          as={Container}
+          bg="white"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>Resale</Text>
+          <Resale />
+        </Box>
+        <Box
+          as={Container}
+          bg="#e9e7eb"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>Scanner</Text>
+          <Scanner />
+        </Box>
+        <Box
+          as={Container}
+          bg="white"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>Seat</Text>
+          <Seat />
+        </Box>
+        <Box
+          as={Container}
+          bg="#e9e7eb"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>Selling</Text>
+          <Selling />
+        </Box>
+        <Box
+          as={Container}
+          bg="white"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>Ticket</Text>
+          <Ticket />
+        </Box>
+        <Box
+          as={Container}
+          bg="#e9e7eb"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>TicketInsurance</Text>
+          <TicketInsurance />
+        </Box>
+        <Box
+          as={Container}
+          bg="white"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>Turnstile</Text>
+          <Turnstile />
+        </Box>
+      </Column>
+    </Columns>
+  </Story>
+</Canvas>
 
-### Social-Icons
+<Canvas>
+  <Story name="User">
+    <Columns space={8}>
+      <Column width={4}>
+        <Text as="h2" variant="headline2">
+          User
+        </Text>
+        <Box
+          as={Container}
+          bg="white"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>User</Text>
+          <User />
+        </Box>
+        <Box
+          as={Container}
+          bg="#e9e7eb"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>Group</Text>
+          <Group />
+        </Box>
+        <Box
+          as={Container}
+          bg="white"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>Cart</Text>
+          <Cart />
+        </Box>
+        <Box
+          as={Container}
+          bg="#e9e7eb"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>CreditCard</Text>
+          <CreditCard />
+        </Box>
+        <Box
+          as={Container}
+          bg="white"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>SmilieVerySatisfied</Text>
+          <SmilieVerySatisfied />
+        </Box>
+      </Column>
+      <Column width={4}>
+        <Box
+          as={Container}
+          bg="#e9e7eb"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>SmilieSatisfied</Text>
+          <SmilieSatisfied />
+        </Box>
+        <Box
+          as={Container}
+          bg="white"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>SmilieNeutral</Text>
+          <SmilieNeutral />
+        </Box>
+        <Box
+          as={Container}
+          bg="#e9e7eb"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>SmilieDissatisfied</Text>
+          <SmilieDissatisfied />
+        </Box>
+        <Box
+          as={Container}
+          bg="white"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>SmilieVeryDissatisfied</Text>
+          <SmilieVeryDissatisfied />
+        </Box>
+        <Box
+          as={Container}
+          bg="#e9e7eb"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>Id</Text>
+          <Id />
+        </Box>
+      </Column>
+    </Columns>
+  </Story>
+</Canvas>
 
-<Preview>
-  <Story name="Facebook-icon">
-    <Facebook />
-  </Story>
-  <Story name="Google-icon">
-    <Google />
-  </Story>
-  <Story name="Instagram-icon">
-    <Instagram />
-  </Story>
-  <Story name="Share-icon">
-    <Share />
-  </Story>
-  <Story name="Twitter-icon">
-    <Twitter />
-  </Story>
-  <Story name="Whatsapp-icon">
-    <Whatsapp />
-  </Story>
-</Preview>
+<Canvas>
+  <Story name="Social">
+    <Columns space={8}>
+      <Column width={4}>
+        <Text as="h2" variant="headline2">
+          Social
+        </Text>
+        <Box
+          as={Container}
+          bg="white"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>Facebook</Text>
+          <Facebook />
+        </Box>
+        <Box
+          as={Container}
+          bg="#e9e7eb"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>Google</Text>
+          <Google />
+        </Box>
+        <Box
+          as={Container}
+          bg="white"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>Instagram</Text>
+          <Instagram />
+        </Box>
+        <Box
+          as={Container}
+          bg="#e9e7eb"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>Share</Text>
+          <Share />
+        </Box>
+        <Box
+          as={Container}
+          bg="white"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>Twitter</Text>
+          <Twitter />
+        </Box>
+        <Box
+          as={Container}
+          bg="#e9e7eb"
+          p="8px"
+          display="flex"
+          justifyContent="space-between"
+        >
+          <Text>Whatsapp</Text>
+          <Whatsapp />
+        </Box>
+      </Column>
+    </Columns>
+  </Story>
+</Canvas>