Skip to content

Commit 30cf8d3

Browse files
RobbertRobbert
committed
WIP
1 parent c1a244d commit 30cf8d3

4 files changed

Lines changed: 68 additions & 61 deletions

File tree

‎src/counter.ts‎

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎src/main.ts‎

Lines changed: 37 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import { generateRadixColors } from './generateRadixColors.js';
22
import { defineCustomElements } from '@utrecht/web-component-library-stencil/loader/index.js';
33
import { toCssName, toCssValue, styleAttribute, setTokens, setCssVariables, toCssVariables } from './utils.js';
4+
import './story-canvas.js';
45
import '@utrecht/page-layout-css';
56
import '@utrecht/body-css';
67
import '@utrecht/root-css';
78
import './style.css';
89
import './basis-theme.css';
910
import './fluid.css';
10-
import './story-canvas.css';
1111

1212
defineCustomElements();
1313

@@ -836,70 +836,70 @@ document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
836836
${renderColorSamplePicker('basis.color.primary', 'basis.color.primary-inverse', radixColors)}
837837
${renderColorScaleExample('basis.color.primary')}
838838
${renderColorScaleExample('basis.color.primary-inverse')}
839-
<div class="example-story-canvas">
839+
<example-story-canvas>
840840
<utrecht-button type="button" appearance="primary-action-button">Primary action</utrecht-button>
841-
</div>
841+
</example-story-canvas>
842842
</div>
843843
<utrecht-heading-3>Secondary color</utrecht-heading-3>
844844
<div>
845845
${renderColorScalePicker('basis.color.secondary', 'basis.color.secondary-inverse', '#00FF00')}
846-
<div class="example-story-canvas">
846+
<example-story-canvas>
847847
<utrecht-button type="button" appearance="secondary-action-button">Secondary action</utrecht-button>
848-
</div>
848+
</example-story-canvas>
849849
${renderColorScaleExample('basis.color.secondary')}
850850
${renderColorScaleExample('basis.color.secondary-inverse')}
851851
</div>
852852
<utrecht-heading-3>Text color</utrecht-heading-3>
853-
<div class="example-story-canvas">
853+
<example-story-canvas>
854854
<utrecht-paragraph>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</utrecht-paragraph>
855855
<utrecht-separator></utrecht-separator>
856856
<utrecht-paragraph>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</utrecht-paragraph>
857-
</div>
857+
</example-story-canvas>
858858
<div>
859859
${renderColorScalePicker('basis.color.text', 'basis.color.text-inverse', '#000000')}
860860
${renderColorScaleExample('basis.color.text')}
861861
${renderColorScaleExample('basis.color.text-inverse')}
862862
</div>
863863
864864
<utrecht-heading-3>Info color</utrecht-heading-3>
865-
<div class="example-story-canvas">
865+
<example-story-canvas>
866866
<utrecht-alert type="info">
867867
<utrecht-paragraph>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</utrecht-paragraph>
868868
</utrecht-alert>
869-
</div>
869+
</example-story-canvas>
870870
<div>
871871
${renderColorScalePicker('basis.color.info', 'basis.color.info-inverse', '#0000FF')}
872872
${renderColorScaleExample('basis.color.info')}
873873
${renderColorScaleExample('basis.color.info-inverse')}
874874
</div>
875875
<utrecht-heading-3>Success color</utrecht-heading-3>
876-
<div class="example-story-canvas">
876+
<example-story-canvas>
877877
<utrecht-alert type="ok">
878878
<utrecht-paragraph>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</utrecht-paragraph>
879879
</utrecht-alert>
880-
</div>
880+
</example-story-canvas>
881881
<div>
882882
${renderColorScalePicker('basis.color.success', 'basis.color.success-inverse', '#228B22')}
883883
${renderColorScaleExample('basis.color.success')}
884884
${renderColorScaleExample('basis.color.success-inverse')}
885885
</div>
886886
<utrecht-heading-3>Warning color</utrecht-heading-3>
887-
<div class="example-story-canvas">
887+
<example-story-canvas>
888888
<utrecht-alert type="warning">
889889
<utrecht-paragraph>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</utrecht-paragraph>
890890
</utrecht-alert>
891-
</div>
891+
</example-story-canvas>
892892
<div>
893893
${renderColorScalePicker('basis.color.warning', 'basis.color.warning-inverse', '#FF8C00')}
894894
${renderColorScaleExample('basis.color.warning')}
895895
${renderColorScaleExample('basis.color.warning-inverse')}
896896
</div>
897897
<utrecht-heading-3>Error color</utrecht-heading-3>
898-
<div class="example-story-canvas">
898+
<example-story-canvas>
899899
<utrecht-alert type="error">
900900
<utrecht-paragraph>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</utrecht-paragraph>
901901
</utrecht-alert>
902-
</div>
902+
</example-story-canvas>
903903
<div>
904904
${renderColorScalePicker('basis.color.error', 'basis.color.error-inverse', '#FF0000')}
905905
${renderColorScaleExample('basis.color.error')}
@@ -911,7 +911,7 @@ document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
911911
${renderFontFamilyVariants(fontFamilies, 'basis.typography.font-family.default')}
912912
</div>
913913
<div>
914-
<div class="example-story-canvas">
914+
<example-story-canvas>
915915
<utrecht-heading-1>Heading 1</utrecht-heading-1>
916916
<utrecht-paragraph><span style="display: block; overflow: hidden; text-overflow: ellipsis; white-space: pre;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></utrecht-paragraph>
917917
<utrecht-heading-2>Heading 2</utrecht-heading-2>
@@ -924,7 +924,7 @@ document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
924924
<utrecht-paragraph><span style="display: block; overflow: hidden; text-overflow: ellipsis; white-space: pre;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></utrecht-paragraph>
925925
<utrecht-heading-6>Heading 6</utrecht-heading-6>
926926
<utrecht-paragraph><span style="display: block; overflow: hidden; text-overflow: ellipsis; white-space: pre;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></utrecht-paragraph>
927-
</div>
927+
</example-story-canvas>
928928
<p>Heading font family:</p>
929929
${renderFontFamilyVariants(fontFamilies, 'basis.typography.font-family.heading')}
930930
</div>
@@ -933,37 +933,37 @@ document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
933933
${renderVariants(headingColorVariants)}
934934
</div>
935935
<div>
936-
<div class="example-story-canvas">
936+
<example-story-canvas>
937937
<utrecht-code-block>&lt;input type="url" value="https://example.fi/"></utrecht-code-block>
938-
</div>
938+
</example-story-canvas>
939939
<p>Code family:</p>
940940
${renderFontFamilyVariants(codeFonts, 'basis.typography.font-family.code')}
941941
</div>
942942
<utrecht-heading-2>Form controls</utrecht-heading-2>
943943
<div>
944-
<div class="example-story-canvas">
944+
<example-story-canvas>
945945
<utrecht-textbox></utrecht-textbox>
946-
</div>
946+
</example-story-canvas>
947947
<p>Form control border radius:</p>
948948
${renderVariants(formControlBorderRadius)}
949949
</div>
950950
<div>
951-
<div class="example-story-canvas">
951+
<example-story-canvas>
952952
<utrecht-textbox></utrecht-textbox>
953-
</div>
953+
</example-story-canvas>
954954
<p>Form control border width:</p>
955955
${renderVariants(formControlBorderWidthVariants)}
956956
</div>
957957
<div>
958958
<figure>
959-
<div class="example-story-canvas">
959+
<example-story-canvas>
960960
<div style="${styleAttribute(buttonWithoutPadding)}">
961961
<utrecht-textarea value="Ut quos illum eligendi. Et aut optio vitae. Reiciendis consectetur ipsam illo laborum rem id. Quo vel iure optio commodi veniam nihil. Quae ipsa non qui. Rem dolores nulla commodi ratione cum.
962962
Aut iste quam unde. Iure quidem et accusantium pariatur molestiae occaecati consequatur. Aut consectetur amet ea sint officia nesciunt ullam ut. Odio nulla rem neque et facere.
963963
Necessitatibus debitis eos expedita dolor. Quam laudantium qui officia est et eos. Sunt dolores voluptatibus nisi similique quae consequatur est.
964964
Repellendus assumenda eveniet qui. Ab eum et ut et odit quia. Voluptates rerum et qui sed aperiam totam veritatis quos."></utrecht-textarea>
965965
</div>
966-
</div>
966+
</example-story-canvas>
967967
<figcaption>Textarea without minimum pointer target size, demonstrating the padding needed for readability</figcaption>
968968
</figure>
969969
<p>Form control padding above and below:</p>
@@ -978,9 +978,9 @@ Repellendus assumenda eveniet qui. Ab eum et ut et odit quia. Voluptates rerum e
978978
</div>
979979
<div>
980980
<p>Button border width:</p>
981-
<div class="example-story-canvas">
981+
<example-story-canvas>
982982
<utrecht-textbox></utrecht-textbox>
983-
</div>
983+
</example-story-canvas>
984984
${renderVariants(buttonBorderWidthVariants)}
985985
</div>
986986
<div>
@@ -996,37 +996,37 @@ Repellendus assumenda eveniet qui. Ab eum et ut et odit quia. Voluptates rerum e
996996
${renderVariants(subtleButtonVariants, 'subtle-button')}
997997
</div>
998998
<utrecht-heading-2>Data badge</utrecht-heading-2>
999-
<div class="example-story-canvas">
999+
<example-story-canvas>
10001000
<utrecht-data-badge>Some subject</utrecht-data-badge>
1001-
</div>
1001+
</example-story-canvas>
10021002
<div>
10031003
<p>Data badge style:</p>
10041004
${renderVariants(dataBadgeAppearanceVariants)}
10051005
</div>
10061006
<utrecht-heading-2>Number badge</utrecht-heading-2>
1007-
<div class="example-story-canvas">
1007+
<example-story-canvas>
10081008
<utrecht-number-badge>42</utrecht-number-badge>
1009-
</div>
1009+
</example-story-canvas>
10101010
<div>
10111011
<p>Number badge style:</p>
10121012
${renderVariants(numberBadgeAppearanceVariants)}
10131013
</div>
10141014
<utrecht-heading-2>Alert</utrecht-heading-2>
1015-
<div class="example-story-canvas">
1015+
<example-story-canvas>
10161016
<utrecht-alert type="info">
10171017
<utrecht-paragraph>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</utrecht-paragraph>
10181018
</utrecht-alert>
1019-
</div>
1019+
</example-story-canvas>
10201020
<div>
10211021
<p>Alert style:</p>
10221022
${renderVariants(alertAppearanceVariants)}
10231023
</div>
10241024
<utrecht-heading-2>Page Footer</utrecht-heading-2>
1025-
<div class="example-story-canvas">
1025+
<example-story-canvas>
10261026
<utrecht-page-footer>
10271027
<p>Hello world</p>
10281028
</utrecht-page-footer>
1029-
</div>
1029+
</example-story-canvas>
10301030
<div>
10311031
<p>Page Footer style:</p>
10321032
${renderVariants(pageFooterAppearanceVariants)}
@@ -1043,11 +1043,11 @@ Repellendus assumenda eveniet qui. Ab eum et ut et odit quia. Voluptates rerum e
10431043
<div>
10441044
<p>Minimum target size:</p>
10451045
<figure>
1046-
<div class="example-story-canvas">
1046+
<example-story-canvas>
10471047
<div style="${styleAttribute(buttonWithoutPadding)}">
10481048
<utrecht-button type="button"><span contentEditable="true">❤️</span></utrecht-button>
10491049
</div>
1050-
</div>
1050+
</example-story-canvas>
10511051
<figcaption>Button without padding, demonstrating the minimum pointer target size</figcaption>
10521052
</figure>
10531053
${renderVariants(pointerTargetVariants)}

‎src/story-canvas.css‎

Lines changed: 0 additions & 15 deletions
This file was deleted.

‎src/story-canvas.ts‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
customElements.define(
2+
'example-story-canvas',
3+
class StoryReact extends HTMLElement {
4+
constructor() {
5+
super();
6+
const style = this.ownerDocument.createElement('style');
7+
style.textContent = `
8+
.example-story-canvas {
9+
background-color: white;
10+
border-radius: 4px;
11+
border-width: 1px;
12+
border-style: solid;
13+
border-color: rgba(0, 0, 0, 0.1);
14+
box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px;
15+
margin-block-end: 40px;
16+
margin-block-start: 25px;
17+
padding-block-end: 30px;
18+
padding-block-start: 30px;
19+
padding-inline-end: 20px;
20+
padding-inline-start: 20px;
21+
position: relative;
22+
}`;
23+
const shadow = this.attachShadow({ mode: 'closed' });
24+
shadow.appendChild(style);
25+
const div = this.ownerDocument.createElement('div');
26+
div.className = 'example-story-canvas';
27+
div.appendChild(this.ownerDocument.createElement('slot'));
28+
shadow.appendChild(div);
29+
}
30+
},
31+
);

0 commit comments

Comments
 (0)