Research on:

• How Storybook workflow fits into figma releases
• How Designer / Developer workflow will work
• Ask/Answer question between team

Let's leave comments here with any follows we need to keep track of @Da-Colon @seanrreid @xraystyle1980

After Color Tokens are added.

What/where/when of each of the icons based on Figma notes

While we don't need to do anything to rebust. I do think a simple layout component might be helpful Something simple like this title banner.

So reviewing some of the setup. I noticed that the font might not be one-one with Figma they way that the text is parsed. I am creating a method to take care of parsing the font object

We will need to setup a way to compile and publish completed components

• set version in package.json to 0.1.0 for initial publish
• add a complier (probably rollup for this project)
• create access token to automatically publish components

A little More down the ways before this becomes a Priority but will need to colab with design and branding and theme our storybook to match with a Decent DAO Theming

WalletConnect

Type

Molecule

Requirements

Props

interface IWalletConnect {
  onConnect: () => Promise<void>;
  onDisconnect: () => Promise<void>;
  account?: string | null;
}

Action States

account === truthy

Account is connected.

• it should display truncated address or ENSname
• There should be a way to disconnect, whether via menu or icon button

(nice to haves)

• indicate to user current network (testnets and L2 support later on)

account === falsey

Account is disconected

• should indicate to user to connect wallet

Any Icon or image Assets needed for Decent Design Tokens

https://www.figma.com/file/9d8dsr3WGKR0vVi99zcU8v/%F0%9F%8E%A8-Fractal-UI-%26-Library-%7C-Web-App-%7C-MVP-Mainnet?node-id=1070%3A17716

to extracted tokens use this to create the colors using 'chakra-ui' theming tools

• using chakra-ui's theming tool create themes based on tokens from fractal designs
• create a story for showcase the color palette

Take a look through the code base and ensure that file structure and project setup is scalable and is ready to move forward.

We are moving to use MDX format for stories. This component will need to be updated

What/where/when of how to use the components

Add TextArea Theme

Take the extracted tokens from Figma and convert to a theme.

• using chakra-ui's theming tool create themes based on tokens from fractal designs
• create a story for showcase the typography

A Minor Priority,

I created a Page component to wrap display pages. Right now I'm thinking particularly of the Typography and Colors Pages.

This could stand for a little more styles (possibly a background colors) to make the pages more viewable

I like this simple layout with a title banner for now

• Clean up look up Typography Page
• Clean up look up colors Page (to be built)

Looks like Chromatic is the standard for publishing storybook. Will need to look into settting up this workflow to publish content properly

Matt needs a Dev site to play around in

I Followed multiple different post about setting up the babel-loader and adding the preview-head.html to set this up. It loads in the dom at least that there is a different font but it's not loading the fonts correctly.

Action Items

• creates a packages directory and add storybook and typescript
• add any known neeeded plugins
• set up mock story
• successfully run storybook in local enviroment

Type

Molecule

• Research Figma Tokens and how they work into this workflow

The following questions need to be answered

• How does it fit into the workflow
• Can figma tokens be directly synced?
• Does a Zeplin Integration create these?

Font is still not fully working. @seanrreid knows the fix for it.

We also need to make sure that we decide on how we want to 'export' the font or require the dApp to download and implement the font on it's own.

Before Designs are ready. the button base styles should be added to atoms/theme/components/buttons. Further discussion on where these 'styles' should live.

Type

Atom

Requirements

States

• slim/collapsed: Just enough width to show icons
• expanded: expand to a set width depending on breakpoints

Nice to haves

• manually expandable on desktop
• (design opinion needed) mobile full screen?

Need to document:

• What the tokens are
• How they're generated (via Figma)
• How they're used in the Design System

Right now Typography is just more or less displaying the different text styles. Is there a way to display the CSS somewhere in storybook when an element is focused or something? or event just adding some docs that shows the css for each one.

This goes for the Colors story as well.

This needs to be updated to start setting some pattern for how stories are written moving forward

Why we wait on the design, there we can do a few things we can do to prepare for

• Gather base components that known to be needed
• Gather base components that known to be needed
• create individual tasks/cards for each component

Add a PR template to keep us honest

To make sure that are designs are close to full support on all browser. We need woff and woff2 on IBM Plex Mono and Sans. Currently Google fonts only exports truetype (.ttf)