Commit 1b198caf authored by Kaarel Teder's avatar Kaarel Teder

Merge branch 'cards' into 'master'

Cards

See merge request !3
parents 8ed429ee 21dcf64d
import { storiesOf } from '@storybook/html';
storiesOf('Cards', module)
.add('List small', () => '<div class="c-card c-card--small">\n' +
' <div>\n' +
' <img class="card-title-icon" src="assets/Icons/user.svg" alt="user">\n' +
' <h1>title</h1>\n' +
' </div>\n' +
' <hr class="line c-card">\n' +
' <h2>Heading</h2>\n' +
'</div>')
.add('List large', () => '<div class="c-card c-card--large">\n' +
' <div>\n' +
' <img class="card-title-icon" src="assets/Icons/user.svg" alt="user">\n' +
' <h1>title</h1>\n' +
' </div>\n' +
' <hr class="c-card line">\n' +
' <h2>Heading</h2>\n' +
' <table class="card-columns">\n' +
' <tbody>\n' +
' <tr>\n' +
' <th>Isikukood</th>\n' +
' <td>47311200277</td>\n' +
' </tr>\n' +
' <tr>\n' +
' <th>Sünni kp</th>\n' +
' <td>20.11.1973</td>\n' +
' </tr>\n' +
' <tr>\n' +
' <th>Rahvus</th>\n' +
' <td>eestlane</td>\n' +
' </tr>\n' +
' <tr>\n' +
' <th>Telefon</th>\n' +
' <td>5096742</td>\n' +
' </tr>\n' +
' <tr>\n' +
' <th>E-post</th>\n' +
' <td>kairi.sarapuu@gmail.com</td>\n' +
' </tr>\n' +
' </tbody>\n' +
' </table>\n' +
' <hr class="c-card line">\n' +
' <div class="link-divider">\n' +
' <a href="#">Link</a>\n' +
' <a href="#">Link</a>\n' +
' <a href="#">Link</a>\n' +
' <a href="#">Link</a>\n' +
' </div>\n' +
'</div>')
.add('List collapse', () => '<div class="c-card">\n' +
' <div>\n' +
' <img class="card-title-icon" src="assets/Icons/user.svg" alt="user">\n' +
' <h1>title</h1>\n' +
' <button class="card-info-button" data-toggle="collapse" data-target=".collapse" aria-expanded="false"\n' +
' aria-controls="collapse">\n' +
' <p>Rohkem infot</p>\n' +
' <img class="c-card--info-arrow" src="assets/Icons/arrow_down.svg" alt="expand">\n' +
' </button>\n' +
' </div>\n' +
' <hr class="line c-card">\n' +
' <h2>Heading</h2>\n' +
' <div class="collapse">\n' +
' <table class="card-columns">\n' +
' <tbody>\n' +
' <tr>\n' +
' <th>Isikukood</th>\n' +
' <td>47311200277</td>\n' +
' </tr>\n' +
' <tr>\n' +
' <th>Sünni kp</th>\n' +
' <td>20.11.1973</td>\n' +
' </tr>\n' +
' <tr>\n' +
' <th>Rahvus</th>\n' +
' <td>eestlane</td>\n' +
' </tr>\n' +
' <tr>\n' +
' <th>Telefon</th>\n' +
' <td>5096742</td>\n' +
' </tr>\n' +
' <tr>\n' +
' <th>E-post</th>\n' +
' <td>kairi.sarapuu@gmail.com</td>\n' +
' </tr>\n' +
' </tbody>\n' +
' </table>\n' +
' <hr class="c-card line">\n' +
' <div class="link-divider">\n' +
' <a href="#">Link</a>\n' +
' <a href="#">Link</a>\n' +
' <a href="#">Link</a>\n' +
' <a href="#">Link</a>\n' +
' </div>\n' +
' </div>\n' +
'</div>')
.add('List cookie', () => '<div class="c-card-cookie">\n' +
' <p>Palume Teie luba küpsiste kasutamiseks. Selleks, kuidas küpsite andmeid kasutame saad täpsemalt lugeda <a\n' +
' href="#">siit</a>.</p>\n' +
' <div class="c-card-cookie--buttons">\n' +
' <button class="c-card-cookie--btn-text">Rohkem infot</button>\n' +
' <button class="c-card-cookie--btn-primary">Button</button>\n' +
' </div>\n' +
'</div>')
.add('List responsive', () => '<div class="c-list">\n' +
' <div class="c-list--text">\n' +
' <hr class="line">\n' +
' <h1>Lapsetoetus 60 € / <br class="text-break">Vanemahüvitis 711,52 €</h1>\n' +
' <p>Väljamakse kuupäev: 08.09.2018</p>\n' +
' </div>\n' +
' <div class="c-list--price">\n' +
' <h2>Kokku <br class="price-break"><b>771,52 €</b></h2>\n' +
' </div>\n' +
' </div>');
\ No newline at end of file
import { storiesOf } from '@storybook/html';
storiesOf('Snackbars', module)
.add('info', () => '<div class="c-snackbar c-snackbar--info">\n' +
' <h1>Teade</h1>\n' +
' <img class="close" src="assets/Icons/close.png" alt="sulge">' +
' <p>Suunatud e-postile kasutaja kairi.sarapuu@gmail.com <br>\n' +
' Soovi korral muuda suunamine kohe siin või vasak menüüst "Minu andmed" - "Suunamine.</p>\n' +
'</div>')
.add('success', () => '<div class="c-snackbar c-snackbar--success">\n' +
' <h1>Teade</h1>\n' +
' <img class="close" src="assets/Icons/close.png" alt="sulge">\n' +
' <p>Suunatud e-postile kasutaja kairi.sarapuu@gmail.com <br>\n' +
' Soovi korral muuda suunamine kohe siin või vasak menüüst "Minu andmed" - "Suunamine.</p>\n' +
'</div>')
.add('warning', () => '<div class="c-snackbar c-snackbar--warning">\n' +
' <h1>Teade</h1>\n' +
' <img class="close" src="assets/Icons/close.png" alt="sulge">\n' +
' <p>Suunatud e-postile kasutaja kairi.sarapuu@gmail.com <br>\n' +
' Soovi korral muuda suunamine kohe siin või vasak menüüst "<a href="#">Minu andmed</a>" - "Suunamine.</p>\n' +
'</div>')
.add('error', () => '<div class="c-snackbar c-snackbar--error">\n' +
' <h1>Teade</h1>\n' +
' <img class="close" src="assets/Icons/close.png" alt="sulge">\n' +
' <p>Suunatud e-postile kasutaja kairi.sarapuu@gmail.com <br>\n' +
' Soovi korral muuda suunamine kohe siin või vasak menüüst "Minu andmed" - "Suunamine.</p>\n')
.add('info with icon', () => '<div class="c-snackbar c-snackbar--info">\n' +
' <h1><span><img class="snackbar-w-icon" src="assets/Icons/info.png" alt="info"></span>\n' +
' Teade</h1>' +
' <img class="close" src="assets/Icons/close.png" alt="sulge">\n' +
' <p>Suunatud e-postile kasutaja kairi.sarapuu@gmail.com <br>\n' +
' Soovi korral muuda suunamine kohe siin või vasak menüüst "Minu andmed" - "Suunamine.</p>\n' +
'</div>')
.add('success with icon', () => '<div class="c-snackbar c-snackbar--success">\n' +
' <h1><span><img class="snackbar-w-icon" src="assets/Icons/success.png" alt="õnnestus"></span>Teade</h1>\n' +
' <img class="close" src="assets/Icons/close.png" alt="sulge">\n' +
' <p>Suunatud e-postile kasutaja kairi.sarapuu@gmail.com <br>\n' +
' Soovi korral muuda suunamine kohe siin või vasak menüüst "Minu andmed" - "Suunamine.</p>\n' +
'</div>')
.add('warning with icon', () => '<div class="c-snackbar c-snackbar--warning">\n' +
' <h1><span><img class="snackbar-w-icon" src="assets/Icons/warning.png" alt="hoiatus"></span>Teade</h1>\n' +
' <img class="close" src="assets/Icons/close.png" alt="sulge">\n' +
' <p>Suunatud e-postile kasutaja kairi.sarapuu@gmail.com <br>\n' +
' Soovi korral muuda suunamine kohe siin või vasak menüüst "<a href="#">Minu andmed</a>" - "Suunamine.</p>\n' +
'</div>')
.add('error with icon', () => '<div class="c-snackbar c-snackbar--error">\n' +
' <h1><span><img class="snackbar-w-icon" src="assets/Icons/error.png" alt="error"></span>Teade</h1>\n' +
' <img class="close" src="assets/Icons/close.png" alt="sulge">\n' +
' <p>Suunatud e-postile kasutaja kairi.sarapuu@gmail.com <br>\n' +
' Soovi korral muuda suunamine kohe siin või vasak menüüst "Minu andmed" - "Suunamine.</p>\n' +
'</div>')
.add('grayscale info', () => '<div class="c-snackbar c-snackbar--info-grayscale">\n' +
' <h1><span><img class="snackbar-w-icon" src="assets/Icons/info.png" alt="info"></span>Teade</h1>\n' +
' <img class="close" src="assets/Icons/close.png" alt="sulge">\n' +
' <p>Suunatud e-postile kasutaja kairi.sarapuu@gmail.com <br>\n' +
' Soovi korral muuda suunamine kohe siin või vasak menüüst "Minu andmed" - "Suunamine.</p>\n' +
'</div>')
.add('grayscale success', () => '<div class="c-snackbar c-snackbar--success-grayscale">\n' +
' <h1><span><img class="snackbar-w-icon" src="assets/Icons/success.png" alt="õnnestus"></span>Teade</h1>\n' +
' <img class="close" src="assets/Icons/close.png" alt="sulge">\n' +
' <p>Suunatud e-postile kasutaja kairi.sarapuu@gmail.com <br>\n' +
' Soovi korral muuda suunamine kohe siin või vasak menüüst "Minu andmed" - "Suunamine.</p>\n' +
'</div>')
.add('grayscale warning', () => '<div class="c-snackbar c-snackbar--warning-grayscale">\n' +
' <h1><span><img class="snackbar-w-icon" src="assets/Icons/warning.png" alt="hoiatus"></span>Teade</h1>\n' +
' <img class="close" src="assets/Icons/close.png" alt="sulge">\n' +
' <p>Suunatud e-postile kasutaja kairi.sarapuu@gmail.com <br>\n' +
' Soovi korral muuda suunamine kohe siin või vasak menüüst "<a href="#">Minu andmed</a>" - "Suunamine.</p>\n' +
'</div>')
.add('grayscale error', () => '<div class="c-snackbar c-snackbar--error-grayscale">\n' +
' <h1><span><img class="snackbar-w-icon" src="assets/Icons/error.png" alt="error"></span>Teade</h1>\n' +
' <img class="close" src="assets/Icons/close.png" alt="sulge">\n' +
' <p>Suunatud e-postile kasutaja kairi.sarapuu@gmail.com <br>\n' +
' Soovi korral muuda suunamine kohe siin või vasak menüüst "Minu andmed" - "Suunamine.</p>\n' +
'</div>')
.add('deuteranopia info', () => '<div class="c-snackbar c-snackbar--info-deuteranopia">\n' +
' <h1><span><img class="snackbar-w-icon" src="assets/Icons/info.png" alt="info"></span>Teade</h1>\n' +
' <img class="close" src="assets/Icons/close.png" alt="sulge">\n' +
' <p>Suunatud e-postile kasutaja kairi.sarapuu@gmail.com <br>\n' +
' Soovi korral muuda suunamine kohe siin või vasak menüüst "Minu andmed" - "Suunamine.</p>\n' +
'</div>')
.add('deuteranopia success', () => '<div class="c-snackbar c-snackbar--success-deuteranopia">\n' +
' <h1><span><img class="snackbar-w-icon" src="assets/Icons/success.png" alt="õnnestus"></span>Teade</h1>\n' +
' <img class="close" src="assets/Icons/close.png" alt="sulge">\n' +
' <p>Suunatud e-postile kasutaja kairi.sarapuu@gmail.com <br>\n' +
' Soovi korral muuda suunamine kohe siin või vasak menüüst "Minu andmed" - "Suunamine.</p>\n' +
'</div>')
.add('deuteranopia warning', () => '<div class="c-snackbar c-snackbar--warning-deuteranopia">\n' +
' <h1><span><img class="snackbar-w-icon" src="assets/Icons/warning.png" alt="hoiatus"></span>Teade</h1>\n' +
' <img class="close" src="assets/Icons/close.png" alt="sulge">\n' +
' <p>Suunatud e-postile kasutaja kairi.sarapuu@gmail.com <br>\n' +
' Soovi korral muuda suunamine kohe siin või vasak menüüst "<a href="#">Minu andmed</a>" - "Suunamine.</p>\n' +
'</div>')
.add('deuteranopia error', () => '<div class="c-snackbar c-snackbar--error-deuteranopia">\n' +
' <h1><span><img class="snackbar-w-icon" src="assets/Icons/error.png" alt="error"></span>Teade</h1>\n' +
' <img class="close" src="assets/Icons/close.png" alt="sulge">\n' +
' <p>Suunatud e-postile kasutaja kairi.sarapuu@gmail.com <br>\n' +
' Soovi korral muuda suunamine kohe siin või vasak menüüst "Minu andmed" - "Suunamine.</p>\n' +
'</div>')
.add('tritanopia info', () => '<div class="c-snackbar c-snackbar--info-tritanopia">\n' +
' <h1><span><img class="snackbar-w-icon" src="assets/Icons/info.png" alt="info"></span>Teade</h1>\n' +
' <img class="close" src="assets/Icons/close.png" alt="sulge">\n' +
' <p>Suunatud e-postile kasutaja kairi.sarapuu@gmail.com <br>\n' +
' Soovi korral muuda suunamine kohe siin või vasak menüüst "Minu andmed" - "Suunamine.</p>\n' +
'</div>')
.add('tritanopia success', () => '<div class="c-snackbar c-snackbar--success-tritanopia">\n' +
' <h1><span><img class="snackbar-w-icon" src="assets/Icons/success.png" alt="õnnestus"></span>Teade</h1>\n' +
' <img class="close" src="assets/Icons/close.png" alt="sulge">\n' +
' <p>Suunatud e-postile kasutaja kairi.sarapuu@gmail.com <br>\n' +
' Soovi korral muuda suunamine kohe siin või vasak menüüst "Minu andmed" - "Suunamine.</p>\n' +
'</div>')
.add('tritanopia warning', () => '<div class="c-snackbar c-snackbar--warning-tritanopia">\n' +
' <h1><span><img class="snackbar-w-icon" src="assets/Icons/warning.png" alt="hoiatus"></span>Teade</h1>\n' +
' <img class="close" src="assets/Icons/close.png" alt="sulge">\n' +
' <p>Suunatud e-postile kasutaja kairi.sarapuu@gmail.com <br>\n' +
' Soovi korral muuda suunamine kohe siin või vasak menüüst "<a href="#">Minu andmed</a>" - "Suunamine.</p>\n' +
'</div>')
.add('tritanopia error', () => '<div class="c-snackbar c-snackbar--error-tritanopia">\n' +
' <h1><span><img class="snackbar-w-icon" src="assets/Icons/error.png" alt="error"></span>Teade</h1>\n' +
' <img class="close" src="assets/Icons/close.png" alt="sulge">\n' +
' <p>Suunatud e-postile kasutaja kairi.sarapuu@gmail.com <br>\n' +
' Soovi korral muuda suunamine kohe siin või vasak menüüst "Minu andmed" - "Suunamine.</p>\n' +
'</div>');
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment