add demo on how to possibly do theming

78509809 · Markus Kaarto · a7efdfd6 · 78509809 · 78509809 · 78509809
Commit 78509809 authored 4 years ago by Markus Kaarto
--- a/src/components/heading/heading-fw.scss
+++ b/src/components/heading/heading-fw.scss
+@import './heading.scss';
+//overrides for full width views
+// JUST A DEMO, FIX AND EXPAND!
+h1 {
+  font-size: $font-size-xxxx-large;
+  font-weight: bold;
+  text-transform: uppercase;
+  line-height: 1.2;
+}
--- a/src/components/heading/heading.tsx
+++ b/src/components/heading/heading.tsx
@@ -3,7 +3,7 @@ import {HeadingVarians, HeadingSectionVariants} from '../../utils/utils';

 @Component({
  tag: 'hy-heading',
-  styleUrl: 'heading.scss',
+  styleUrls: {default: 'heading.scss', wide: 'heading-fw.scss'},
  scoped: true
 })
 export class Heading {

--- a/src/index.html
+++ b/src/index.html
@@ -11,42 +11,8 @@
    <script nomodule src="/build/huds-lib.js"></script>
  </head>

-  <body>
-    <hy-baseline margin="2">
-      <hy-box p="0.5" width="100, 50, 67">
-        <hy-box p="1" bg="grayscale-medium" justify="center">
-          <hy-paragraph-text>wide</hy-paragraph-text>
-        </hy-box>
-      </hy-box>
-    </hy-baseline>
-    <script>
-      const el = document.querySelector('hy-box');
-    </script>
-
-    <hy-grid-container>
-      <hy-cta-link-button
-        link-content="CTA Link button one"
-        sc-label="CTA Link button one"
-        url="https://www.google.com"
-        is-external="false"
-      >
-      </hy-cta-link-button>
-
-      <hy-cta-liftup-image-text
-        image-url="https://www.helsinki.fi/sites/default/files/styles/16_9_huge/public/coronavirus_1920x1080px_4.jpg?itok=dOgb6pfs"
-        text-title="Text title 2"
-        text-description="Text description Lorem ipsum dolor sit amet, consectetur adipiscing elit."
-        main-url="https://www.google.com"
-        main-url-title="Standalone link"
-        main-url-aria-label="Standalone link internal"
-        main-url-is-external="false"
-        standalone-url="https://www.google.com"
-        standalone-url-title="CTA standalone URL example"
-        standalone-url-aria-label=""
-        standalone-url-is-external="false"
-      />
-
-      <hy-button variant="secondary" url="https://google.com" size="large"> Call to the action!</hy-button>
-    </hy-grid-container>
+  <body class="full-width">
+    <hy-heading heading="h1" mode="default">Heading 1 overridden to default</hy-heading>
+    <hy-heading heading="h1">Heading 1, but take full-width style</hy-heading>
  </body>
 </html>
--- a/stencil.config.ts
+++ b/stencil.config.ts
@@ -8,6 +8,7 @@ import {reactOutputTarget} from '@stencil/react-output-target';
 export const config: Config = {
  namespace: 'huds-lib',
  globalStyle: 'src/global/styles.scss',
+  globalScript: 'src/global/globalScript.ts',
  plugins: [
    sass({
      injectGlobalPaths: ['src/global/styles.scss']