docs: update docs related to designkit (#750)

meetalva · Feb 6, 2019 · 0b13c7d · 0b13c7d · marionebl · Feb 6, 2019
1 parent f77c40b
commit 0b13c7d
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 40 deletions.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -35,7 +35,7 @@ See the [Contributor Covenant Code of Conduct](CODE_OF_CONDUCT.md) for more info
 ## Setup for contributors
 
 To add a contribution to Alva (improve its features, fix issues),
-get the source of the application itself, and if you don't already have a Alva compatible styleguide, the kickstart styleguide (designkit):
+get the source of the application itself, and if you don't already have a Alva compatible styleguide, the kickstart styleguide (alva-design):
 
 1. Clone the [alva](https://github.com/meetalva/alva) repository:
 
@@ -55,19 +55,19 @@ npm i && npm start
 
 If you don't have a compatible styleguide, follow the next steps:
 
-1. Clone the [designkit](https://github.com/meetalva/designkit) repository:
+1. Clone the [Alva Design](https://github.com/meetalva/alva-design) repository:
 
 ```shell
-git clone [email protected]:meetalva/designkit.git
+git clone [email protected]:meetalva/alva-design.git
 ```
 
-2. Run this command to build the designkit for Alva:
+2. Run this command to build the Alva Design Library for Alva:
 
 ```shell
 npm i && npm build
 ```
 
-3. Now you should be able to open the designkit inside Alva
+3. Now you should be able to open the Alva Design Library inside Alva
 
 ## Typedoc
 
@@ -141,7 +141,7 @@ All the sources of Alva are located in `src`, divided into the following folders
 
 * **components**: All React components for the project, page, page-element, and property panes, as well as the design preview in the middle of the page. Components may be smart (they may contain their own state), but only as long as the state is nothing global, related to multiple components, or fundamental enough. In this case, the state is maintained by the store (see below).
 * **electron**: The bootstrap code to start the Electron App, including the container HTML, and the main menu.
-* **lsg**: The styled components Alva uses, as a living styleguide. Do not mixup this styleguide with the designkit (which also is a styleguide). The LSG contains the styled, logic-less components which are used by the Alva UI. The designkit contains the patterns the designer uses to create a basic design (wireframes).
+* **lsg**: The styled components Alva uses, as a living styleguide. Do not mixup this styleguide with the designkit (which also is a styleguide). The LSG contains the styled, logic-less components which are used by the Alva UI. The Alva Design Library contains the patterns the designer uses to create a basic design (wireframes).
 * **resources**: Resources are files related to the build, like the icons.
 * **store**: The store is the data-center and business logic of Alva. It is a collection of MobX observables and does not contain any UI elements like React components. Instead, all components bind their props to this store by decorating with `@MobX.observer`. The store contains the Alva projects and pages the user edits, as well as the styleguide and styleguide analyzers, the logic to interpret your frontend pattern components.
 

diff --git a/docs/guides/create-library.md b/docs/guides/create-library.md
@@ -35,9 +35,9 @@ Following along is very useful to understand what happens behind the scences.
 A project setup can be very time consuming though – you might want to have a look at the following
 shortcuts if you don't want to focus on technical setup.
 
-- **Focus on editing components**: Reuse [Alva Designkit](https://github.com/meetalva/designkit) and change to [Create Pattern Guide](./create-pattern)
+- **Focus on editing components**: Reuse [Alva Design Library](https://github.com/meetalva/alva-design) and change to [Create Pattern Guide](./create-pattern)
 
-- **Focus on adding components**: Fetch [Component Library Starter](https://github.com/meetalva/designkit) and skip to [Section 2](#2.-add-components)
+- **Focus on adding components**: Fetch [Component Library Starter](https://github.com/meetalva/alva-design) and skip to [Section 2](#2.-add-components)
 
 ## Prerequesites
 

diff --git a/docs/guides/create-pattern.md b/docs/guides/create-pattern.md
@@ -24,11 +24,11 @@ installed on your machine.
 * :globe_with_meridians: Internet connection
 
 
-## 1. Setup up Alva Designkit
+## 1. Setup up Alva Design Library
 
 > ❔
 > In this guide we'll skip the project setup
-> part by reusing the Alva Designkit. 
+> part by reusing the Alva Design Library. 
 >
 > If you want to start fresh, skip to our [Create a Library Guide](./create-library.md)
 
@@ -39,7 +39,7 @@ continuing with step 2.
 
 !(video:https://media.meetalva.io/video/add-hello-world.m4v)
 
-Open your favorite text editor in the Alva Designkit folder you just 
+Open your favorite text editor in the Alva Design Library folder you just 
 connected to Alva. We'll show [VSCode](https://code.visualstudio.com/) in screenshots and videos but any text editor will do.
 
 Let's create a new folder called "Hello World" with an `index.tsx` file in it:
@@ -73,7 +73,7 @@ export * from './hello-world';
 ## 3. Build your changes
 
 For Alva to understand your new code you need to build it with the [TypeScript](https://www.typescriptlang.org/) compiler.
-Let's do that real quick. Execute the following command in your Alva Designkit folder.
+Let's do that real quick. Execute the following command in your Alva Design Library folder.
 
 ```
 npm run build
@@ -84,22 +84,22 @@ When TypeScript is done translating your code the terminal window should resembl
 ```
 λ npm run build
 
-> [email protected] build /Users/marneb/Documents/alva/designkit
+> [email protected] build /Users/marneb/Documents/alva/alva-design
 > tsc
 
-~/alva/designkit
+~/alva/alva-design
 λ
 ```
 
 We are all set, let's switch back to Alva.
 
-## 4. Update Designkit in your Alva project
+## 4. Update Alva Design Library in your Alva project
 
 !(video:https://media.meetalva.io/video/update-library.m4v)
 
 Start Alva and open the project you created while working through the [Connect a Library Guide](./library). 
 
-On the `meetalva-designkit` card hit the "Update" button. Wait for the card to switch back from "Connecting" to "Connected".
+Open the "Libraries" Tab. On the `Alva Website UI` card hit the "Update" button. Wait for the card to switch back from "Connecting" to "Connected".
 
 
 ## 5. Use the Hello World component

diff --git a/docs/guides/create-properties.md b/docs/guides/create-properties.md
@@ -13,11 +13,11 @@ tags:
 
 ---
 
-## 1. Setup up Alva Designkit
+## 1. Setup up Alva Design Library
 
 > ❔
 > In this guide we'll skip the project setup
-> part by reusing the Alva Designkit. 
+> part by reusing the Alva Design Library. 
 >
 > If you want to start fresh, skip to our [Create a Library Guide](./create-library.md)
 Please make sure to follow our [Connnect a Library](./library) and [Create a Pattern](./create-pattern) before 
@@ -93,7 +93,7 @@ export const HelloWorld: React.SFC<HelloWorldProps> = (props) => {
 
 Remember to execute the TypeScript compiler via `npm run build`.
 
-Then fire up Alva, open a new file and connect your Designkit.
+Then fire up Alva, open a new file and connect your Alva Design Library.
 Locate the `HelloWorld` component via search in the component list.
 
 Double-click the component or drag it on Alvas element list. You should 

diff --git a/docs/guides/library.md b/docs/guides/library.md
@@ -15,7 +15,7 @@ tags:
 
 ---
 
-> :information_source: This guide teaches how to connect an Alva project to the ready-made Alva Designkit. 
+> :information_source: This guide teaches how to connect an Alva project to the ready-made Alva Design Library. 
 
 > For a guide on how to create a custom pattern library from scratch, see [Create a custom Library](./doc/docs/guides/create-library?guides-enabled=true).
 
@@ -32,37 +32,37 @@ This will involve a bit of work in the terminal. Don't worry if you are unfamlia
 * :turtle: Node.js `v8` – [Install](https://nodejs.org/en/)
 
 
-## 1. Clone Alva Designkit
+## 1. Clone Alva Design Library
 
 Open a Terminal window. Type the following command into your terminal.
 
 ```
-git clone https://github.com/meetalva/designkit.git
+git clone https://github.com/meetalva/alva-design.git
 ```
 
-Press enter to execute the command and download the code from [github.com/meetalva/designkit](https://github.com/meetalva/designkit) into a new local folder called `designkit`.
+Press enter to execute the command and download the code from [github.com/meetalva/alva-design](https://github.com/meetalva/alva-design) into a new local folder called `alva-design`.
 
 If everything worked you should see output resembling this:
 
 ```
-Cloning into 'designkit'...
+Cloning into 'alva-design'...
 remote: Counting objects: 1409, done.
 remote: Compressing objects: 100% (194/194), done.
 Resolving deltas: 100% (660/660), done.
 ```
 
-## 2. Prepare Alva Designkit for Analysis
+## 2. Prepare Alva Design Library for Analysis
 
-Next we have to "build" Alva Designkit from the source files we just cloned. 
-We do this to make Alva's life easier when it tries to understand the Designkit's code.
+Next we have to "build" Alva Design Library from the source files we just cloned. 
+We do this to make Alva's life easier when it tries to understand the library's code.
 
-Change into the `designkit` folder with the following terminal command.
+Change into the `alva-design` folder with the following terminal command.
 
 ```
-cd designkit
+cd alva-design
 ```
 
-Then install the Desingkit's dependencies by typing
+Then install the library's dependencies by typing
 
 ```
 npm install
@@ -82,7 +82,7 @@ Let's create the build results for the Alva Desingkit now. You can do so by exec
 npm run build
 ```
 
-This will create JavaScript and typing files from the Designkit TypeScript sources.
+This will create JavaScript and typing files from the Alva Design Library TypeScript sources.
 
 Run the following command and keep hold of the path that is printed to the terminal, we'll need it later:
 
@@ -91,9 +91,9 @@ echo $PWD
 # /Users/alva-user/Desktop
 ```
 
-## 3. Connect Designkit to Alva 
+## 3. Connect Alva Design Library to Alva 
 
-The Designkit is now ready to be connected to Alva. Start Alva and create a new project by hitting `Create New Alva File` on the right side of the welcome screen
+The Alva Design Library is now ready to be connected to Alva. Start Alva and create a new project by hitting `Create New Alva File` on the right side of the welcome screen
 
 ![](https://media.meetalva.io//splash.svg)
 
@@ -105,28 +105,28 @@ Alva will display a fresh, empty file. On the right side of the window you can f
 
 ---
 
-In the file dialog that opens, locate the Designkit we cloned in step 2. Remember the last command `echo $PWD`? At the path your terminal printed for this command you can find the Designkit.
+In the file dialog that opens, locate the Alva Design Library we cloned in step 2. Remember the last command `echo $PWD`? At the path your terminal printed for this command you can find the Alva Design Library.
 
-Make sure to select the `package.json` file in the `designkit` folder. 
+Make sure to select the `package.json` file in the `alva-design` folder. 
 
-Analysing the DesignKit should take Alva just a few seconds. 
+Analysing the Alva Design Library should take Alva just a few seconds. 
 You can verify everything worked if the library pane looks roughly like the screenshot below. 
 
 ![](https://media.meetalva.io/libraries.svg)
 
-Notice the second library with the green "Connected" indicator? That is the Designkit we just added.
+Notice the second library with the green "Connected" indicator? That is the Alva Design Library we just added.
 
 ---
 
 ## 4. Put connected Patterns to use
 
-Apart from listing the Designkit in the libraries pane, connecting it had a second more subtle effect. 
+Apart from listing the Alva Design Library in the libraries pane, connecting it had a second more subtle effect. 
 If you scroll down in your patterns list, you can find new patterns:
 
 ![](https://media.meetalva.io/pattern-list.png)
 
 Let's put what we learned in the [Essentials](./doc/docs/guides/essentials?guides-enabled=true) guide to use and 
-put a Designkit button element in our prototype. Double click on the button pattern. Alva should render an empty button element on the preview. Change the `Order` property to `Primary` to give it a nice solild background.
+put a Alva Design Library button element in our prototype. Double click on the button pattern. Alva should render an empty button element on the preview. Change the `Order` property to `Primary` to give it a nice solild background.
 
 ![](https://media.meetalva.io/empty-button.png)
 

diff --git a/docs/references/library-requirements.md b/docs/references/library-requirements.md
@@ -9,7 +9,7 @@ Pattern libraries are a cornerstone of Alva workflows: They allow you to impleme
 works on the web and make it accessible to everyone on your team. 
 
 As such it is important you understand the assumptions Alva makes concerning pattern libraries.
-See the full list below. A production-level example of an Alva-enabled pattern library it the [Alva Designkit](https://github.com/meetalva/designkit/)
+See the full list below. A production-level example of an Alva-enabled pattern library it the [Alva Design Library](https://github.com/meetalva/alva-design/)
 which is openly available on GitHub.
 
 ## Requirements