diff --git a/package.json b/package.json
index d3eec5ce314999f6a1942886d9a924552186ee90..f40e8b79e9e4a5869016f3beefccb766249b6e7a 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
{
- "name": "hy-design-system-demo",
- "version": "0.0.9",
- "description": "Stencil Component Starter",
+ "name": "@itcenteratunihelsinki/huds-lib",
+ "version": "0.0.2",
+ "description": "Helsinki University Design System library",
"main": "dist/index.js",
"module": "dist/index.mjs",
"es2015": "dist/esm/index.mjs",
@@ -9,20 +9,19 @@
"types": "dist/types/index.d.ts",
"collection": "dist/collection/collection-manifest.json",
"collection:main": "dist/collection/index.js",
- "unpkg": "dist/hy-design-system-demo/hy-design-system-demo.js",
"files": [
"dist/",
- "www/",
"loader/"
],
"scripts": {
"build": "stencil build --docs",
+ "prepare": "stencil build",
"start": "stencil build --dev --watch --serve",
"test": "stencil test --spec",
"test.watch": "stencil test --spec --e2e --watchAll",
"generate": "stencil generate",
"watchdocs": "node watchdocs.js",
- "build.watch": "concurrently 'stencil build --docs --watch --serve' 'yarn watchdocs'"
+ "build.watch": "stencil build --docs --watch --serve"
},
"devDependencies": {
"@stencil/core": "^1.8.3",
diff --git a/readme.md b/readme.md
index 1503ae2353b7098dbb3312268441f7a964da25af..294e07968411c7030c1f95d14cc3ba3cd57ad16c 100644
--- a/readme.md
+++ b/readme.md
@@ -9,51 +9,41 @@
1. Have discussions with designers, agree on basic functionality
2. run `yarn generate` to generate a blanc component and start developing
-3. Extract useful helper components, such as `<hy-row> <hy-column>`
-4. Review the design with designer and PO or a colleague
-5. Check with basic accessibility tools (TBD which tools?!?)
-6. Write component documentation. At least it should
+3. Review the design with designer and PO or a colleague
+4. Check with basic accessibility tools (TBD which tools?!?)
+5. Build the library with `yarn build`. This will generate a .md file with some technical documentation to the components folder. Add your own desicription and instructions. At least it should
1. Have a short introduction
2. List all states the component can be in.
3. List all variants the component can have
4. Include code examples
-7. Write unit tests where it makes sense. We use jest and puppeteer.
-8. Run `bash bumpversion.sh` to run tests and bump the version number.
-9. Do a final commit with all the build artefacts included.
-10. Make a merge request -> pass the code review -> celebrate!
+6. Write unit tests where it makes sense. We use jest and puppeteer.
+7. Make a merge request and ask a colleague for a review
-## Writing documentation in Vuepress
+## Adding documentation to Vuepress
You should install the documentation project from https://version.helsinki.fi/julkiset-sivut/design-system.
To run it with your version of the design system, follow these steps:
-1. Clone and install dependencies
-2. Run `yarn add https://version.helsinki.fi/julkiset-sivut/design-system-lib.git#<YOUR-BRANCH>` to update the latest version of the library with the git branch you're currently working on.
-3. Add necessary pages inside `.vuepress/config.js`
-4. Manually add the Markdown documentation from the repository
+1. Clone the repo and install dependencies with `yarn install`
+2. By default the library uses the latest version from npm. To use newer library version, see linking instructions below
+3. Add necessary .md files to VuePress /docs folder and update `.vuepress/config.js`
-## Combined workflow
+In case you want to develop and see the component inside documentation right away, you can adapt the following workflow:
-In case you want to develop and see the component inside documentation right away, you can adapt the following workflow.
-
-Inside the library Make a dynamic link of the library project:
+Inside the library folder, make a dynamic link of the library:
`yarn link`
+`yarn build.watch` (this builds the library on each save, so your changes will be reflected inside VuePress, thanks to the dynamic link)
+
Inside the Vuepress project
`yarn link <library project name>`
-The you need to start both development environments:
-
-Vuepress directory: `yarn docs:dev`
-
-Library directory: `yarn build.watch --target <VUEPRESS FOLDER>`
+`yarn docs:dev`
-The second script starts both the stencil watcher in production mode, which builds the actual library on every change. It also concurrently runs a custom watcher script copying markdown files to Vuepress directory.
-
-NOTE: Even when you have the documentation files in Vuepress, you'll need to manually add them to the navigation in docs/.vuepress/config.js
+Currently you need to manually sync .md files between the library and VuePress code bases. Best workflow could be to write documentation inside VuePress and then finally sync with matching file in library.
## Running with Docker (WIP)
@@ -62,21 +52,3 @@ If you don't want or cannot install node and other dependencies, you can run the
`docker-compose up`
Image can be rebuilt with `docker-compose build` if needed for example after a node package was added.
-
-CAVEAT: This doesn't solve running libraty with Vuepress and that use case requires vanilla docker way of running.
-
-### Vanilla docker way
-
-First build the container
-
-`docker build -t helsinkifi/huds .`
-
-Then run the image with optional Vuepress location and the npm script you want to run.
-
-NOTE: If you want to use "watchdocs" or "build.watch" scripts, you must include the Vuepress location!
-
-`docker run -v ${PWD}:/usr/src/app -v <YOUR VUEPRESS LOCATION FULL PATH>:/usr/src/app/tempdocuments -p 3333:3333 helsinkifi/huds <NPM SCRIPT>`
-
-For example:
-
-`docker run -v ${PWD}:/usr/src/app -p 3333:3333 helsinkifi/huds build`
diff --git a/src/components/baseline/readme.md b/src/components/baseline/readme.md
index d0aec2da5fe35cb067b78492fa4a90742b96a070..4145a86e7f1f3a55e56f53390fa18aa9f43a1beb 100644
--- a/src/components/baseline/readme.md
+++ b/src/components/baseline/readme.md
@@ -7,4 +7,4 @@
----------------------------------------------
-HY component demo
+Helsinki University Design System
diff --git a/src/components/button/readme.md b/src/components/button/readme.md
index 872b29786c50a68bfbacc51fbbe9bcae97fbc6a8..46c0e8f7c01600222a39f0f39858ec3c16d6ba23 100644
--- a/src/components/button/readme.md
+++ b/src/components/button/readme.md
@@ -5,7 +5,7 @@ sidebar: true
# Button
-Something awesome!
+Well, it's a button.
## Usage
@@ -70,7 +70,6 @@ Something awesome!
<!-- Auto Generated Below -->
-
## Properties
| Property | Attribute | Description | Type | Default |
@@ -80,7 +79,6 @@ Something awesome!
| `state` | `state` | | `"disabled" \| "enabled"` | `"enabled"` |
| `variant` | `variant` | | `"primary" \| "secondary"` | `"primary"` |
-
## Dependencies
### Depends on
@@ -88,12 +86,13 @@ Something awesome!
- [hy-icon](../icon)
### Graph
+
```mermaid
graph TD;
hy-button --> hy-icon
style hy-button fill:#f9f,stroke:#333,stroke-width:4px
```
-----------------------------------------------
+---
-HY component demo
+Helsinki University Design System
diff --git a/src/components/docs-container/readme.md b/src/components/docs-container/readme.md
index ead0f2d2a73285520940ce54f78a1beefcbd882c..a50ff5c12e367ae803d5969a7a21a9a2c1697b9a 100644
--- a/src/components/docs-container/readme.md
+++ b/src/components/docs-container/readme.md
@@ -7,4 +7,4 @@
----------------------------------------------
-HY component demo
+Helsinki University Design System
diff --git a/src/components/grid-container/readme.md b/src/components/grid-container/readme.md
index d57d7b55e4ad450969c737530ea3e5a7d9a7fe82..166739ef006f58e9f4a99ebe4e32c1e26369bcff 100644
--- a/src/components/grid-container/readme.md
+++ b/src/components/grid-container/readme.md
@@ -7,4 +7,4 @@
----------------------------------------------
-HY component demo
+Helsinki University Design System
diff --git a/src/components/grid-item/readme.md b/src/components/grid-item/readme.md
index 8e4e1af6f85d52fa604c8584bf15c3d389e55f21..ab8139f4d9e885e8cd3bf3a569da7df51c8f8293 100644
--- a/src/components/grid-item/readme.md
+++ b/src/components/grid-item/readme.md
@@ -17,4 +17,4 @@
----------------------------------------------
-HY component demo
+Helsinki University Design System
diff --git a/src/components/grid-row/readme.md b/src/components/grid-row/readme.md
index 3a31a4c0207ee12ded2c6914a820e07476bc94b2..a617d4c2426d69689e8e82ff2c7cec32026026a5 100644
--- a/src/components/grid-row/readme.md
+++ b/src/components/grid-row/readme.md
@@ -7,4 +7,4 @@
----------------------------------------------
-HY component demo
+Helsinki University Design System
diff --git a/src/components/heading/readme.md b/src/components/heading/readme.md
index c9bf6862004d34525f1b9ccd1ed30edbd51d205c..02ce4fa79987fc40724930bd59ce4b3db518aa04 100644
--- a/src/components/heading/readme.md
+++ b/src/components/heading/readme.md
@@ -96,4 +96,4 @@ Provide heading attribute for the component to choose what type of heading to us
----------------------------------------------
-HY component demo
+Helsinki University Design System
diff --git a/src/components/icon/readme.md b/src/components/icon/readme.md
index b5e5c4b1f82db5db5e42aa7bee3d34a3fe7f8d02..c566c3ce9be9ab0cc7fa299929dba63088c277e1 100644
--- a/src/components/icon/readme.md
+++ b/src/components/icon/readme.md
@@ -29,4 +29,4 @@ graph TD;
----------------------------------------------
-HY component demo
+Helsinki University Design System
diff --git a/src/components/ingress/readme.md b/src/components/ingress/readme.md
index fc334aceb464460cdfc8c5350f4616564b8310a1..3c748d25c0c2f7c528a81f2406bddfd682b4d946 100644
--- a/src/components/ingress/readme.md
+++ b/src/components/ingress/readme.md
@@ -7,4 +7,4 @@
----------------------------------------------
-HY component demo
+Helsinki University Design System
diff --git a/src/components/link/readme.md b/src/components/link/readme.md
index d8d62757e7c885ba1a22b06ab23982a6568b0586..71bf27168e3b14a5d345f1664d4c00cac5d2c604 100644
--- a/src/components/link/readme.md
+++ b/src/components/link/readme.md
@@ -71,4 +71,4 @@ Link has two varians. Regular link and with-in-paragraph link.
----------------------------------------------
-HY component demo
+Helsinki University Design System
diff --git a/src/components/paragraph-text/readme.md b/src/components/paragraph-text/readme.md
index 33ded6d98bf87160fa34baf0f3c3772d35ecf777..e05b7c4c54c9c37faea496359294a3ddce1e4adf 100644
--- a/src/components/paragraph-text/readme.md
+++ b/src/components/paragraph-text/readme.md
@@ -36,4 +36,4 @@ Basic text paragraph.
----------------------------------------------
-HY component demo
+Helsinki University Design System
diff --git a/src/components/row/readme.md b/src/components/row/readme.md
index d1d553b649ee1c1f372ea031c6af4256dfaf6adf..0f72b15d9ca052949dc2a77f6aca7c3242c3c2ea 100644
--- a/src/components/row/readme.md
+++ b/src/components/row/readme.md
@@ -15,4 +15,4 @@
----------------------------------------------
-HY component demo
+Helsinki University Design System
diff --git a/src/components/section-container/readme.md b/src/components/section-container/readme.md
index 7e829bd794dc55b55fa5a3977150a6cfe55df75a..1e4bc0422160ae75f7c2e13583d45d21c098446e 100644
--- a/src/components/section-container/readme.md
+++ b/src/components/section-container/readme.md
@@ -7,4 +7,4 @@
----------------------------------------------
-HY component demo
+Helsinki University Design System
diff --git a/src/components/tiny-text/readme.md b/src/components/tiny-text/readme.md
index 7da39fd5af8a9ad2f17a45765f5cf49ae058c0aa..927fe4fc3864684edd61d065b7b2003bb8410650 100644
--- a/src/components/tiny-text/readme.md
+++ b/src/components/tiny-text/readme.md
@@ -22,4 +22,4 @@ Tiny text
----------------------------------------------
-HY component demo
+Helsinki University Design System
diff --git a/src/fonts/fonts.css b/src/fonts/fonts.css
new file mode 100644
index 0000000000000000000000000000000000000000..7ad3c29aed7a09af70c3df72657a45b92920dde9
--- /dev/null
+++ b/src/fonts/fonts.css
@@ -0,0 +1,51 @@
+@font-face {
+ font-family: "Open Sans";
+ font-weight: 400;
+ font-style: normal;
+ src: url("./Open-Sans-regular/Open-Sans-regular.eot");
+ src: url("./Open-Sans-regular/Open-Sans-regular.eot?#iefix")
+ format("embedded-opentype"),
+ local("Open Sans"), local("Open-Sans-regular"),
+ url("./Open-Sans-regular/Open-Sans-regular.ttf") format("truetype"),
+ url("./Open-Sans-regular/Open-Sans-regular.woff2") format("woff2"),
+ url("./Open-Sans-regular/Open-Sans-regular.woff") format("woff"),
+ url("./Open-Sans-regular/Open-Sans-regular.svg#OpenSans") format("svg");
+}
+
+@font-face {
+ font-family: "Open Sans";
+ font-weight: 600;
+ font-style: normal;
+ src: url("./Open-Sans-600/Open-Sans-600.eot");
+ src: url("./Open-Sans-600/Open-Sans-600.eot?#iefix")
+ format("embedded-opentype"),
+ local("Open Sans Semibold"), local("Open-Sans-600"),
+ url("./Open-Sans-600/Open-Sans-600.ttf") format("truetype"),
+ url("./Open-Sans-600/Open-Sans-600.woff2") format("woff2"),
+ url("./Open-Sans-600/Open-Sans-600.woff") format("woff"),
+ url("./Open-Sans-600/Open-Sans-600.svg#OpenSans") format("svg");
+}
+
+@font-face {
+ font-family: "Open Sans";
+ font-weight: 700;
+ font-style: normal;
+ src: url("./Open-Sans-700/Open-Sans-700.eot");
+ src: url("./Open-Sans-700/Open-Sans-700.eot?#iefix")
+ format("embedded-opentype"),
+ local("Open Sans Bold"), local("Open-Sans-700"),
+ url("./Open-Sans-700/Open-Sans-700.ttf") format("truetype"),
+ url("./Open-Sans-700/Open-Sans-700.woff2") format("woff2"),
+ url("./Open-Sans-700/Open-Sans-700.woff") format("woff"),
+ url("./Open-Sans-700/Open-Sans-700.svg#OpenSans") format("svg");
+}
+
+:root {
+ --base-font-size: 16px;
+ --base-font-size-mobile: 14px;
+ --main-font-family: "Open Sans", Helvetica, Arial, sans-serif;
+}
+
+* {
+ box-sizing: border-box;
+}
diff --git a/src/global/_typography.scss b/src/global/_typography.scss
index 627778952efd8c6e0defaa3a34c7f6eb0f441f63..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 100644
--- a/src/global/_typography.scss
+++ b/src/global/_typography.scss
@@ -1,52 +0,0 @@
-@font-face {
- font-family: "Open Sans";
- font-weight: 400;
- font-style: normal;
- src: url("../fonts/Open-Sans-regular/Open-Sans-regular.eot");
- src: url("../fonts/Open-Sans-regular/Open-Sans-regular.eot?#iefix")
- format("embedded-opentype"),
- local("Open Sans"), local("Open-Sans-regular"),
- url("../fonts/Open-Sans-regular/Open-Sans-regular.ttf") format("truetype"),
- url("../fonts/Open-Sans-regular/Open-Sans-regular.woff2") format("woff2"),
- url("../fonts/Open-Sans-regular/Open-Sans-regular.woff") format("woff"),
- url("../fonts/Open-Sans-regular/Open-Sans-regular.svg#OpenSans")
- format("svg");
-}
-
-@font-face {
- font-family: "Open Sans";
- font-weight: 600;
- font-style: normal;
- src: url("../fonts/Open-Sans-600/Open-Sans-600.eot");
- src: url("../fonts/Open-Sans-600/Open-Sans-600.eot?#iefix")
- format("embedded-opentype"),
- local("Open Sans Semibold"), local("Open-Sans-600"),
- url("../fonts/Open-Sans-600/Open-Sans-600.ttf") format("truetype"),
- url("../fonts/Open-Sans-600/Open-Sans-600.woff2") format("woff2"),
- url("../fonts/Open-Sans-600/Open-Sans-600.woff") format("woff"),
- url("../fonts/Open-Sans-600/Open-Sans-600.svg#OpenSans") format("svg");
-}
-
-@font-face {
- font-family: "Open Sans";
- font-weight: 700;
- font-style: normal;
- src: url("../fonts/Open-Sans-700/Open-Sans-700.eot");
- src: url("../fonts/Open-Sans-700/Open-Sans-700.eot?#iefix")
- format("embedded-opentype"),
- local("Open Sans Bold"), local("Open-Sans-700"),
- url("../fonts/Open-Sans-700/Open-Sans-700.ttf") format("truetype"),
- url("../fonts/Open-Sans-700/Open-Sans-700.woff2") format("woff2"),
- url("../fonts/Open-Sans-700/Open-Sans-700.woff") format("woff"),
- url("../fonts/Open-Sans-700/Open-Sans-700.svg#OpenSans") format("svg");
-}
-
-:root {
- --base-font-size: 16px;
- --base-font-size-mobile: 14px;
- --main-font-family: "Open Sans", Helvetica, Arial, sans-serif;
-}
-
-* {
- box-sizing: border-box;
-}
diff --git a/src/index.html b/src/index.html
index 47051ca9bca9c73b569405335117ae0416ee2e89..abfd0f8536f326ee22387c0c1e78708d6c1758dd 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,11 +1,8 @@
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
- <link
- rel="stylesheet"
- type="text/css"
- href="/build/hy-design-system-demo.css"
- />
+ <link rel="stylesheet" type="text/css" href="/build/huds-lib.css" />
+ <link rel="stylesheet" type="text/css" href="/fonts/fonts.css" />
<meta charset="utf-8" />
<meta
name="viewport"
@@ -13,15 +10,14 @@
/>
<title>Stencil Component Starter</title>
- <script type="module" src="/build/hy-design-system-demo.esm.js"></script>
- <script nomodule src="/build/hy-design-system-demo.js"></script>
+ <script type="module" src="/build/huds-lib.esm.js"></script>
+ <script nomodule src="/build/huds-lib.js"></script>
</head>
<body>
<h1>Helsinki University web components demo</h1>
<hy-section-container>
This is a Section Container
- <hy-heading heading="h2"
- section="subsection">
+ <hy-heading heading="h2" section="subsection">
Section Header
</hy-heading>
</hy-section-container>
@@ -52,89 +48,80 @@
</hy-section-container>
<hy-grid-container>
<hy-grid-row>
- <hy-grid-item columns="6">
- <hy-row>
- <hy-button
- >
- Primary
- </hy-button>
- <hy-button
- icon-right="hy-icon-arrow-right"
- >
- Primary Arrow
- </hy-button>
- <hy-button
- state="disabled"
- >
- Primary Disabled
- </hy-button>
- <hy-button
- state="disabled"
- icon-right="hy-icon-arrow-right"
- >
- Login Primary Arrow Disabled
- </hy-button>
- </hy-row>
- <hy-row>
- <hy-button
- variant="secondary"
- >
- Secondary
- </hy-button>
- <hy-button
- icon-right="hy-icon-arrow-right"
- variant="secondary"
- >
- Secondary Arrow
- </hy-button>
- <hy-button
- state="disabled"
- variant="secondary"
- >
- Secondary Disabled
- </hy-button>
- <hy-button
- state="disabled"
- icon-right="hy-icon-arrow-right"
- variant="secondary"
+ <hy-grid-item columns="6">
+ <hy-row>
+ <hy-button>
+ Primary
+ </hy-button>
+ <hy-button icon-right="hy-icon-arrow-right">
+ Primary Arrow
+ </hy-button>
+ <hy-button state="disabled">
+ Primary Disabled
+ </hy-button>
+ <hy-button state="disabled" icon-right="hy-icon-arrow-right">
+ Login Primary Arrow Disabled
+ </hy-button>
+ </hy-row>
+ <hy-row>
+ <hy-button variant="secondary">
+ Secondary
+ </hy-button>
+ <hy-button icon-right="hy-icon-arrow-right" variant="secondary">
+ Secondary Arrow
+ </hy-button>
+ <hy-button state="disabled" variant="secondary">
+ Secondary Disabled
+ </hy-button>
+ <hy-button
+ state="disabled"
+ icon-right="hy-icon-arrow-right"
+ variant="secondary"
+ >
+ Secondary Arrow Disabled
+ </hy-button>
+ </hy-row>
+ </hy-grid-item>
+ <hy-grid-item columns="6">
+ <hy-heading heading="h1">This is a Heading 1</hy-heading>
+ <hy-heading heading="h2">This is a Heading 2</hy-heading>
+ <hy-heading heading="h3">This is a Heading 3</hy-heading>
+ <hy-heading heading="h4">This is a Heading 4</hy-heading>
+ <hy-heading heading="h5">This is a Heading 5</hy-heading>
+ <hy-heading heading="h6">This is a Heading 6</hy-heading>
+ </hy-grid-item>
+ </hy-grid-row>
+ <hy-grid-row>
+ <hy-grid-item>
+ <hy-heading heading="h2" section="subsection"
+ >This is subsection heading that has divider</hy-heading
>
- Secondary Arrow Disabled
- </hy-button>
- </hy-row>
- </hy-grid-item>
- <hy-grid-item columns="6">
- <hy-heading heading="h1">This is a Heading 1</hy-heading>
- <hy-heading heading="h2">This is a Heading 2</hy-heading>
- <hy-heading heading="h3">This is a Heading 3</hy-heading>
- <hy-heading heading="h4">This is a Heading 4</hy-heading>
- <hy-heading heading="h5">This is a Heading 5</hy-heading>
- <hy-heading heading="h6">This is a Heading 6</hy-heading>
- </hy-grid-item>
- </hy-grid-row>
- <hy-grid-row>
- <hy-grid-item>
- <hy-heading heading="h2" section="subsection">This is subsection heading that has divider</hy-heading>
- </hy-grid-item>
- </hy-grid-row>
-
+ </hy-grid-item>
+ </hy-grid-row>
+
<hy-ingress>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Ut ac orci nisl. Nam at arcu eget enim interdum rhoncus eu nec turpis.
- Duis in est id nunc dictum lobortis. Nullam magna lectus, hendrerit tempus pharetra at, cursus sit amet orci
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac orci
+ nisl. Nam at arcu eget enim interdum rhoncus eu nec turpis. Duis in est
+ id nunc dictum lobortis. Nullam magna lectus, hendrerit tempus pharetra
+ at, cursus sit amet orci
</hy-ingress>
<hy-paragraph-text>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Ut ac orci nisl. Nam at arcu eget enim interdum rhoncus eu nec turpis.
- Duis in est id nunc dictum lobortis. Nullam magna lectus, hendrerit tempus pharetra at, cursus sit amet orci.
- Aenean in pulvinar mi. Nulla facilisi. Etiam elementum malesuada ante, quis facilisis arcu varius consectetur.
- Phasellus eu nisl elementum, laoreet sem condimentum, hendrerit urna. Ut eu lorem et nunc consectetur bibendum.
- Nulla sed orci urna. Vivamus ac lectus ex. Nam sit amet tincidunt leo. In sed nunc eu odio semper maximus vel suscipit ligula.
- In hac habitasse platea dictumst.
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac orci
+ nisl. Nam at arcu eget enim interdum rhoncus eu nec turpis. Duis in est
+ id nunc dictum lobortis. Nullam magna lectus, hendrerit tempus pharetra
+ at, cursus sit amet orci. Aenean in pulvinar mi. Nulla facilisi. Etiam
+ elementum malesuada ante, quis facilisis arcu varius consectetur.
+ Phasellus eu nisl elementum, laoreet sem condimentum, hendrerit urna. Ut
+ eu lorem et nunc consectetur bibendum. Nulla sed orci urna. Vivamus ac
+ lectus ex. Nam sit amet tincidunt leo. In sed nunc eu odio semper
+ maximus vel suscipit ligula. In hac habitasse platea dictumst.
</hy-paragraph-text>
- <hy-tiny-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</hy-tiny-text>
+ <hy-tiny-text
+ >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</hy-tiny-text
+ >
- <hy-link
+ <hy-link
url="https://www.google.com"
link-content="Regular link"
aria-label="Regular link"
@@ -153,42 +140,106 @@
<hy-grid-row>
<hy-grid-item columns="4" columnsLg="2" columnsSm="6">
<hy-paragraph-text>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Ut ac orci nisl. Nam at arcu eget enim interdum rhoncus eu nec turpis.
- Duis in est id nunc dictum lobortis. Nullam magna lectus, hendrerit tempus pharetra at, cursus sit amet orci.
- Aenean in pulvinar mi.
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac orci
+ nisl. Nam at arcu eget enim interdum rhoncus eu nec turpis. Duis in
+ est id nunc dictum lobortis. Nullam magna lectus, hendrerit tempus
+ pharetra at, cursus sit amet orci. Aenean in pulvinar mi.
</hy-paragraph-text>
</hy-grid-item>
- <hy-grid-item columns="8" columnsLg=10 columnsSm="6">
+ <hy-grid-item columns="8" columnsLg="10" columnsSm="6">
<hy-grid-row>
- <hy-grid-item columns="4" columnsSm="12" columnsLg="3" contentAlign="left">
- <hy-tiny-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</hy-tiny-text>
+ <hy-grid-item
+ columns="4"
+ columnsSm="12"
+ columnsLg="3"
+ contentAlign="left"
+ >
+ <hy-tiny-text
+ >Lorem ipsum dolor sit amet, consectetur adipiscing
+ elit.</hy-tiny-text
+ >
</hy-grid-item>
- <hy-grid-item columns="4" columnsSm="12" columnsLg="3" contentAlign="center">
- <hy-tiny-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</hy-tiny-text>
+ <hy-grid-item
+ columns="4"
+ columnsSm="12"
+ columnsLg="3"
+ contentAlign="center"
+ >
+ <hy-tiny-text
+ >Lorem ipsum dolor sit amet, consectetur adipiscing
+ elit.</hy-tiny-text
+ >
</hy-grid-item>
- <hy-grid-item columns="4" columnsSm="12" columnsLg="3" contentAlign="right">
- <hy-tiny-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</hy-tiny-text>
+ <hy-grid-item
+ columns="4"
+ columnsSm="12"
+ columnsLg="3"
+ contentAlign="right"
+ >
+ <hy-tiny-text
+ >Lorem ipsum dolor sit amet, consectetur adipiscing
+ elit.</hy-tiny-text
+ >
</hy-grid-item>
- <hy-grid-item columns="4" columnsSm="12" columnsLg="3" contentAlign="left">
- <hy-tiny-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</hy-tiny-text>
+ <hy-grid-item
+ columns="4"
+ columnsSm="12"
+ columnsLg="3"
+ contentAlign="left"
+ >
+ <hy-tiny-text
+ >Lorem ipsum dolor sit amet, consectetur adipiscing
+ elit.</hy-tiny-text
+ >
</hy-grid-item>
- <hy-grid-item columns="4" columnsSm="12" columnsLg="3" contentAlign="center">
- <hy-tiny-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</hy-tiny-text>
+ <hy-grid-item
+ columns="4"
+ columnsSm="12"
+ columnsLg="3"
+ contentAlign="center"
+ >
+ <hy-tiny-text
+ >Lorem ipsum dolor sit amet, consectetur adipiscing
+ elit.</hy-tiny-text
+ >
</hy-grid-item>
- <hy-grid-item columns="4" columnsSm="12" columnsLg="3" contentAlign="right">
- <hy-tiny-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</hy-tiny-text>
+ <hy-grid-item
+ columns="4"
+ columnsSm="12"
+ columnsLg="3"
+ contentAlign="right"
+ >
+ <hy-tiny-text
+ >Lorem ipsum dolor sit amet, consectetur adipiscing
+ elit.</hy-tiny-text
+ >
</hy-grid-item>
- <hy-grid-item columns="4" columnsSm="12" columnsLg="3" contentAlign="left">
- <hy-tiny-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</hy-tiny-text>
+ <hy-grid-item
+ columns="4"
+ columnsSm="12"
+ columnsLg="3"
+ contentAlign="left"
+ >
+ <hy-tiny-text
+ >Lorem ipsum dolor sit amet, consectetur adipiscing
+ elit.</hy-tiny-text
+ >
</hy-grid-item>
- <hy-grid-item columns="4" columnsSm="12" columnsLg="3" contentAlign="center">
- <hy-tiny-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</hy-tiny-text>
+ <hy-grid-item
+ columns="4"
+ columnsSm="12"
+ columnsLg="3"
+ contentAlign="center"
+ >
+ <hy-tiny-text
+ >Lorem ipsum dolor sit amet, consectetur adipiscing
+ elit.</hy-tiny-text
+ >
</hy-grid-item>
</hy-grid-row>
</hy-grid-item>
</hy-grid-row>
<h1>This is docker!</h1>
- </hy-grid-container>
+ </hy-grid-container>
</body>
</html>
diff --git a/stencil.config.ts b/stencil.config.ts
index d5e1dd9e8bbf4eebe00c8ed3c6cc293c5b71996d..e264c2222dac4623d1a94a63a3e1662091bb4e99 100644
--- a/stencil.config.ts
+++ b/stencil.config.ts
@@ -5,7 +5,7 @@ import autoprefixer from "autoprefixer";
import postcssimport from "postcss-import";
export const config: Config = {
- namespace: "hy-design-system-demo",
+ namespace: "huds-lib",
globalStyle: "src/global/styles.scss",
plugins: [
sass({
@@ -22,11 +22,12 @@ export const config: Config = {
],
outputTargets: [
{
- type: "dist"
+ type: "dist",
+ copy: [{ src: "fonts", dest: "../fonts" }]
},
{
type: "docs-readme",
- footer: "HY component demo"
+ footer: "Helsinki University Design System"
},
{
type: "www",