-
Notifications
You must be signed in to change notification settings - Fork 42
/
welcome.stories.ts
69 lines (63 loc) · 2.49 KB
/
welcome.stories.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
/*
* Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.
* This software is released under MIT license.
* The full license information can be found in LICENSE in the root directory of this project.
*/
import { html } from 'lit';
import img from '../.storybook/public/assets/images/clarity-logo.svg';
export default {
title: 'Stories/Clarity',
parameters: {
options: { showPanel: false },
},
};
export const core = () => {
return html`
<section cds-layout="vertical gap:xxl align:center m-t:xxxl" cds-text="center">
<img
src="${img}"
alt="Clarity Core"
cds-layout="fill"
style="max-width: calc(var(--cds-global-layout-space-xxl) * 3)"
/>
<h1 cds-text="display">
Clarity Core
</h1>
<h2 cds-text="section">Web Component Implementation of the Clarity Design System</h2>
<div cds-layout="vertical gap:lg container:xs" cds-text="left">
<p cds-text="body">
Clarity Core is a Web Component implementation of the
<a href="https://clarity.design" cds-text="link">Clarity Design System</a>. Clarity Core provides a set of
reusable UI components that work in any JavaScript framework or no framework at all.
</p>
<p cds-text="body">
Some of our components and utilities are currently offered as previews. This means that these components and
utilities are in active development but ready to try out! We are hoping you will share your
<a href="https://github.com/vmware/clarity/issues/new/choose" cds-text="link">feedback</a> on these new
components. You can read more about Core and its goals in our
<a
href="https://medium.com/claritydesignsystem/clarity-core-72f6d3a029bc"
target="_blank"
rel="noopener"
cds-text="link"
>Medium blog post</a
>.
</p>
</div>
<div cds-layout="horizontal gap:xs align:horizontal-center">
<a href="./?path=/docs/documentation-getting-started--page">
<cds-button status="primary">
Get Started
</cds-button>
</a>
<a href="https://medium.com/claritydesignsystem/clarity-core-72f6d3a029bc" target="_blank" rel="noopener">
<cds-button action="outline">Learn More</cds-button>
</a>
</div>
</section>
`;
};
// empty story is used to trigger the toolbar options for doc only pages
export const themeSwitcher = () => {
return html`<div></div>`;
};