Install

npm i docsify-cli -g

docsify serve ./nypl-design-system-docs

Blue Skies

The follow is a list of things we'd like this documentation site to accomplish or be capable of.

• Site should be searchable
• Site should be editable
• Site should have a table of all of the components with their statuses (in-progress, in-review, complete), and the implementation libraries' statuses (Twig template, React component, ERB template)

Header

UX	Accessibility	DT: Twig	DT: React	DT: ERB
Complete	Complete	Complete	Out of Date	Not Built

• Site should have authorship data, last revision date(s) on files, and descriptions of changes made (such as a git commit)
• Site should have roles so that certain users can lock components and their documentation to prevent edits unless author has a certain role
• In-progress components should have a working draft that is still visible on the site
• We should be able to see everywhere a component is used—for example, ResearchNow has a section that pulls in dynamically all of the components it is using for QA to be able to see all of that information in one place
• Site should have an intro page and a Getting Started Guide
• Components should display the relationships of where they are used and link back to their lower-level functional requirements (e.g., "Event Status Bar" uses "Button", link to the button component to see its requirements)
• Components should have: link to Figma instance for designers, IA (functional specs and accessibility), look & feel, their status, a built and interactive display of the component in-action, and the numbered documentation that Ellen created listing functional requirements.
• We should be able to number the components on the page in our documentation site to write documentation for them. This should automatically add the number to that component in Figma.

ID	Template ID	Module ID	Order #	Document Field

Ideation/Product >> UX/Prototype >> Design Technology (templates, React components) >> Version Update >> Committing back to the library

Draft - Database

I am using the word component to refer to atoms, molecules, and organisms in our design system.

Fields

• Template ID: This is a unique identifier generated by the db.
• **Component id: This may be an atom, molecule, or organism; it maps to a component id from the component table. Module UUID maps to our controled vocabulary of ids usind abbreviations and numbers, ex. OG-002.
• Order Number: This is meaningful, it maps to tab/reading/HTML order. It is also the order things will appear in mobile.
• Documentation ID: This is an id that ties together a template, a component, and the documentation text
• Project ID: This is a unique identifier generated by the db.
• Project Name: This is the name of the project, ex "Shared Collection Catalog". For NYPL.org reno, projects would map to sections of the site ex: "NYPL - Locations" or "NYPL - Research."
• Documentation Field Type: This is a controlled vocabulary, right now it is: description, rules, accessibility, source
• Documentation Field: This is a field with documentation notes. It is a markdown file to allow for some formatting like including code snippits like an HTML element.
• Component Name: This is the human readable name of a component, ex "Footer"
• Component Type: Right now these are: Atom, molecule, organism

Template Table

Fields:

• Template ID
• Component UUID
• Order Number
• Documentation ID

Project Table

This table inventories active project ids and names. Fields:

• Project ID
• Project Name Project ID and Project Name have a 1-1 relationship.

Project and Template Table

This table inventories which templates belong to which projects.

Fields:

• Project ID
• Template ID One project ID may hae many Template IDs. One Template ID has only one Project ID.

Template and Component Table

This table inventories which components belong to which templates.

Fields:

• Template ID
• Component ID Template ID and Component ID have a many to many relationship.

Component Table

This is the inventory of components, ids, name, and types.

Fields

• Component IDs
• Component Name
• Component Type

Component IDs and Component Names have a one to many relationship. A component name has one component type.

Documentation Table

Fields:

• Documentation ID
• Documentation Field Type
• Documentation Field

Open Issues

• How do we handle JavaScript?

Figma Plugins

• Interplay: Interplay connects with your design system code repository to let you access and use your design system code components right within Figma. I don't know if this would be useful.
• Google Sheets Sync: Sync content from Google Sheets directly into your Figma file. This might be helpful for updating names.
• Focus Orderer: Quickly annotate your designs’ focus / tab order flow. Intriguing for Willa, potentially.
• Layer Names Transform: This plugin will help you to quickly transform the names of your layers.