diff --git a/styleguide/index.html b/styleguide/index.html index 132dcb6f..b71b4900 100644 --- a/styleguide/index.html +++ b/styleguide/index.html @@ -8,12 +8,11 @@ frontend -
- + Living Styleguide - +
Sample Pages
diff --git a/styleguide/js/banner.js b/styleguide/js/banner.js deleted file mode 100644 index 15332bb2..00000000 --- a/styleguide/js/banner.js +++ /dev/null @@ -1,87 +0,0 @@ -import { html, render } from 'https://unpkg.com/lit-html@0.7.1/lit-html.js'; - -export const bannerTemplate = () => { - return html` - - `; -}; diff --git a/styleguide/js/banners.js b/styleguide/js/banners.js new file mode 100644 index 00000000..11a8dc91 --- /dev/null +++ b/styleguide/js/banners.js @@ -0,0 +1,83 @@ +import { html, render } from 'https://unpkg.com/lit-html@0.7.1/lit-html.js'; + +export const bannersTemplate = () => { + return html` +
+

Banner

+
+
+
Example
+
+ +
+
+
+
+ `; +}; diff --git a/styleguide/js/buttons.js b/styleguide/js/buttons.js index af8d9898..5e1c638e 100644 --- a/styleguide/js/buttons.js +++ b/styleguide/js/buttons.js @@ -3,8 +3,8 @@ import { html, render } from 'https://unpkg.com/lit-html@0.7.1/lit-html.js'; export const buttonsTemplate = () => { return html`
-
-

Buttons

+
+

Buttons

Button / Anchor element.

Default button size is l. Default button type is secondary.

@@ -17,38 +17,38 @@ export const buttonsTemplate = () => {

  • tag: "button" | "a"

  • label: string

    • -
    -
    Example
    -
    +
    +
    Example
    +
    -
      +
      -
      -
      -
      -
        + diff --git a/styleguide/js/colors.js b/styleguide/js/colors.js index 295cc2eb..f10b61ca 100644 --- a/styleguide/js/colors.js +++ b/styleguide/js/colors.js @@ -3,111 +3,78 @@ import { html, render } from 'https://unpkg.com/lit-html@0.7.1/lit-html.js'; export const colorsTemplate = () => { return html`
        -
        -

        Colors

        +
        +

        Colors

        Colors used in this project.

        -
        -
        -
        -

        Primary

        -
        -
        -
        -
        -

        living-green

        -
        -
        -
        -
        -
        -

        teal

        -
        -
        -
        -
        -
        -

        moss

        -
        -
        -
        -
        -
        -

        blush

        -
        -
        +
        +
        +

        Primary

        +
        +
        +
        +

        living-green

        +
        +
        +
        +

        teal

        +
        +
        +
        +

        moss

        +
        +
        +
        +

        blush

        -
        -

        Neutral

        -
        -
        -
        -
        -

        neutral-0

        -
        -
        -
        -
        -
        -

        neutral-10

        -
        -
        -
        -
        -
        -

        neutral-20

        -
        -
        -
        -
        -
        -

        neutral-30

        -
        -
        -
        -
        -
        -

        neutral-40

        -
        -
        -
        -
        -
        -

        neutral-50

        -
        -
        -
        -
        -
        -

        neutral-60

        -
        -
        -
        -
        -
        -

        neutral-80

        -
        -
        -
        -
        -
        -

        neutral-90

        -
        -
        -
        -
        -
        -

        neutral-100

        -
        -
        - -
        -
        -
        -

        black

        -
        -
        +
        +
        +

        Neutral

        +
        +
        +
        +

        neutral-0

        +
        +
        +
        +

        neutral-10

        +
        +
        +
        +

        neutral-20

        +
        +
        +
        +

        neutral-30

        +
        +
        +
        +

        neutral-40

        +
        +
        +
        +

        neutral-50

        +
        +
        +
        +

        neutral-60

        +
        +
        +
        +

        neutral-80

        +
        +
        +
        +

        neutral-90

        +
        +
        +
        +

        neutral-100

        +
        +
        +
        +

        black

        diff --git a/styleguide/js/features.js b/styleguide/js/features.js index e4e5716a..a47eb48b 100644 --- a/styleguide/js/features.js +++ b/styleguide/js/features.js @@ -2,12 +2,12 @@ import { html, render } from 'https://unpkg.com/lit-html@0.7.1/lit-html.js'; export const featuresTemplate = () => { return html` -
        -

        Features

        +
        +

        Features

        -
        -
        Example
        -
        +
        +
        Example
        +

        Erat lacinia

        diff --git a/styleguide/js/footnote.js b/styleguide/js/footnote.js index 9001a4d4..63183ccc 100644 --- a/styleguide/js/footnote.js +++ b/styleguide/js/footnote.js @@ -2,12 +2,12 @@ import { html, render } from 'https://unpkg.com/lit-html@0.7.1/lit-html.js'; export const footnoteTemplate = () => { return html` -
        -

        Footnote

        +
        +

        Footnote

        -
        -
        Example
        -
        +
        +
        Example
        +
        diff --git a/styleguide/js/form.js b/styleguide/js/form.js index d697389c..4526fb26 100644 --- a/styleguide/js/form.js +++ b/styleguide/js/form.js @@ -2,11 +2,11 @@ import { html, render } from 'https://unpkg.com/lit-html@0.7.1/lit-html.js'; export const formTemplate = () => { return html` -
        -

        Form

        +
        +

        Form

        -
        -
        Example
        +
        +
        Example
        diff --git a/styleguide/js/grid.js b/styleguide/js/grid.js index 94ac5fb7..1f17711c 100644 --- a/styleguide/js/grid.js +++ b/styleguide/js/grid.js @@ -2,8 +2,8 @@ import { html, render } from 'https://unpkg.com/lit-html@0.7.1/lit-html.js'; export const gridTemplate = () => { return html` -
        -

        Grid

        +
        +

        Grid

        Grid-Item-Container

        diff --git a/styleguide/js/icons.js b/styleguide/js/icons.js index f7ff1667..53941888 100644 --- a/styleguide/js/icons.js +++ b/styleguide/js/icons.js @@ -2,36 +2,36 @@ import { html, render } from 'https://unpkg.com/lit-html@0.7.1/lit-html.js'; export const iconsTemplate = () => { return html` -

        -

        Icons

        +
        +

        Icons

        This is a list of all icons used in project.

        Usage

        -
        -
        Example
        -
        -
        -
        +
        +
        Example
        +
        +
        +
        Twitter
        -
        +
        Facebook
        -
        +
        Instagram
        -
        +
        Github
        -
        +
        Dribbble
        -
        +
        Tumblr
        diff --git a/styleguide/js/image.js b/styleguide/js/image.js index 60fe3d90..122185c7 100644 --- a/styleguide/js/image.js +++ b/styleguide/js/image.js @@ -2,13 +2,13 @@ import { html, render } from 'https://unpkg.com/lit-html@0.7.1/lit-html.js'; export const imageTemplate = () => { return html` -
        -

        Image

        +
        +

        Image

        Generic image element.

        -
        -
        Example
        -
        +
        +
        Example
        +
        @@ -18,7 +18,7 @@ export const imageTemplate = () => {
        - +
        diff --git a/styleguide/js/link.js b/styleguide/js/link.js index 076f8cb5..fd8595bd 100644 --- a/styleguide/js/link.js +++ b/styleguide/js/link.js @@ -2,12 +2,12 @@ import { html, render } from 'https://unpkg.com/lit-html@0.7.1/lit-html.js'; export const linkTemplate = () => { return html` -
        -

        Link

        +
        +

        Link

        -
        -
        Example
        -
        +
        +
        Example
        +
        Link
        diff --git a/styleguide/js/media.js b/styleguide/js/media.js index 074359fc..0c5dc624 100644 --- a/styleguide/js/media.js +++ b/styleguide/js/media.js @@ -2,12 +2,12 @@ import { html, render } from 'https://unpkg.com/lit-html@0.7.1/lit-html.js'; export const mediaTemplate = () => { return html` -
        -

        Media

        +
        +

        Media

        -
        -
        Example
        -
        +
        +
        Example
        +

        Normal Image

        { + return html` +
        + +
        +
        +

        + +

        +
        +
        + + Search icon +
        +
        +
        Basics
        +
        +
        + Button +
        +
        + Colors +
        +
        + Grid +
        +
        + Icons +
        +
        + Typography +
        +
        +
        Elements
        +
        +
        + Image +
        +
        + Link +
        +
        + Media +
        +
        + Footnote +
        +
        +
        Blocks
        +
        +
        + Banner +
        +
        + Features +
        +
        + Posts +
        +
        +
        Components
        +
        +
        + Form +
        +
        + Table +
        +
        +
        +
        +
        + `; +}; diff --git a/styleguide/js/posts.js b/styleguide/js/posts.js index b5db0f30..fa705097 100644 --- a/styleguide/js/posts.js +++ b/styleguide/js/posts.js @@ -2,12 +2,12 @@ import { html, render } from 'https://unpkg.com/lit-html@0.7.1/lit-html.js'; export const postsTemplate = () => { return html` -
        -

        Posts

        +
        +

        Posts

        -
        -
        Example
        -
        +
        +
        Example
        +

        Ipsum sed dolor

        diff --git a/styleguide/js/script.js b/styleguide/js/script.js index ee9a3c88..e4fb76be 100644 --- a/styleguide/js/script.js +++ b/styleguide/js/script.js @@ -12,84 +12,80 @@ import { linkTemplate } from './link.js'; import { mediaTemplate } from './media.js'; import { postsTemplate } from './posts.js'; import { tableTemplate } from './table.js'; -import { bannerTemplate } from './banner.js'; +import { bannersTemplate } from './banners.js'; +import { navTemplate } from './nav.js'; -document.addEventListener('DOMContentLoaded', function () { - const navLinks = document.querySelectorAll('.ls-sidebar-element'); +const navContainer = document.getElementById('nav-container'); +if (navContainer) { + render(navTemplate(), navContainer); +} - navLinks.forEach(function (link) { - link.addEventListener('click', function (event) { - const targetId = link.getAttribute('href').substring(1); - const targetElement = document.getElementById(targetId); +const buttonsContainer = document.getElementById('buttons-container'); +if (buttonsContainer) { + render(buttonsTemplate(), buttonsContainer); +} - if (targetElement) { - event.preventDefault(); - targetElement.scrollIntoView({ behavior: 'smooth' }); - } - }); - }); +const colorsContainer = document.getElementById('colors-container'); +if (colorsContainer) { + render(colorsTemplate(), colorsContainer); +} - const buttonsContainer = document.getElementById('buttons-container'); - if (buttonsContainer) { - render(buttonsTemplate(), buttonsContainer); - } - const colorsContainer = document.getElementById('colors-container'); - if (colorsContainer) { - render(colorsTemplate(), colorsContainer); - } +const gridContainer = document.getElementById('grid-container'); +if (gridContainer) { + render(gridTemplate(), gridContainer); +} - const gridContainer = document.getElementById('grid-container'); - if (gridContainer) { - render(gridTemplate(), gridContainer); - } - const iconsContainer = document.getElementById('icons-container'); - if (iconsContainer) { - render(iconsTemplate(), iconsContainer); - } +const iconsContainer = document.getElementById('icons-container'); +if (iconsContainer) { + render(iconsTemplate(), iconsContainer); +} - const typographyContainer = document.getElementById('typography-container'); - if (typographyContainer) { - render(typographyTemplate(), typographyContainer); - } +const typographyContainer = document.getElementById('typography-container'); +if (typographyContainer) { + render(typographyTemplate(), typographyContainer); +} - const imageContainer = document.getElementById('image-container'); - if (imageContainer) { - render(imageTemplate(), imageContainer); - } - const linkContainer = document.getElementById('link-container'); - if (linkContainer) { - render(linkTemplate(), linkContainer); - } +const imageContainer = document.getElementById('image-container'); +if (imageContainer) { + render(imageTemplate(), imageContainer); +} - const mediaContainer = document.getElementById('media-container'); - if (mediaContainer) { - render(mediaTemplate(), mediaContainer); - } +const linkContainer = document.getElementById('link-container'); +if (linkContainer) { + render(linkTemplate(), linkContainer); +} - const footnoteContainer = document.getElementById('footnote-container'); - if (footnoteContainer) { - render(footnoteTemplate(), footnoteContainer); - } +const mediaContainer = document.getElementById('media-container'); +if (mediaContainer) { + render(mediaTemplate(), mediaContainer); +} - const bannerContainer = document.getElementById('banner-container'); - if (bannerContainer) { - render(bannerTemplate(), bannerContainer); - } +const footnoteContainer = document.getElementById('footnote-container'); +if (footnoteContainer) { + render(footnoteTemplate(), footnoteContainer); +} - const featuresContainer = document.getElementById('features-container'); - if (featuresContainer) { - render(featuresTemplate(), featuresContainer); - } - const postsContainer = document.getElementById('posts-container'); - if (postsContainer) { - render(postsTemplate(), postsContainer); - } - const formContainer = document.getElementById('form-container'); - if (formContainer) { - render(formTemplate(), formContainer); - } - const tableContainer = document.getElementById('table-container'); - if (tableContainer) { - render(tableTemplate(), tableContainer); - } -}); +const bannersContainer = document.getElementById('banners-container'); +if (bannersContainer) { + render(bannersTemplate(), bannersContainer); +} + +const featuresContainer = document.getElementById('features-container'); +if (featuresContainer) { + render(featuresTemplate(), featuresContainer); +} + +const postsContainer = document.getElementById('posts-container'); +if (postsContainer) { + render(postsTemplate(), postsContainer); +} + +const formContainer = document.getElementById('form-container'); +if (formContainer) { + render(formTemplate(), formContainer); +} + +const tableContainer = document.getElementById('table-container'); +if (tableContainer) { + render(tableTemplate(), tableContainer); +} diff --git a/styleguide/js/table.js b/styleguide/js/table.js index 16153f27..71975c3c 100644 --- a/styleguide/js/table.js +++ b/styleguide/js/table.js @@ -2,12 +2,12 @@ import { html, render } from 'https://unpkg.com/lit-html@0.7.1/lit-html.js'; export const tableTemplate = () => { return html` -
        -

        Table

        +
        +

        Table

        -
        -
        Example
        -
        +
        +
        Example
        +
        diff --git a/styleguide/js/typography.js b/styleguide/js/typography.js index 2bfa8f10..c1e4eb92 100644 --- a/styleguide/js/typography.js +++ b/styleguide/js/typography.js @@ -2,19 +2,19 @@ import { html, render } from 'https://unpkg.com/lit-html@0.7.1/lit-html.js'; export const typographyTemplate = () => { return html` -
        -

        Typography

        +
        +

        Typography

        -
        -
        Example
        -
        +
        +
        Example
        +

        Link Text

        STL Typography

        -
        -
        Example
        -
        +
        +
        Example
        +

        HERO

        H1 light

        H1 semibold

        diff --git a/styleguide/main.css b/styleguide/main.css index f35ce16e..4a5659e0 100644 --- a/styleguide/main.css +++ b/styleguide/main.css @@ -55,7 +55,7 @@ padding: 20px; } -.i-library { +.ls-library { padding: 50px 60px; } @@ -81,13 +81,13 @@ margin-top: 32px; } -.i-example { +.ls-example { border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.05); margin: 20px 0; } -.i-example__heading { +.ls-example__heading { padding: 12px 4px; color: #353535; margin: 0; @@ -96,7 +96,7 @@ text-transform: uppercase; } -.i-example__body { +.ls-example__body { padding: 20px; background-color: #fff; max-height: 100vh; @@ -105,11 +105,11 @@ /* color */ -.bm-lsg-colors__group-headline { +.lsg-colors__group-headline { margin-block: 48px 24px; } -.bm-lsg-colors__colors { +.lsg-colors__colors { align-items: stretch; column-gap: 46px; display: flex; @@ -118,11 +118,11 @@ flex-wrap: wrap; } -.bm-lsg-colors__color { +.lsg-colors__color { display: block; } -.bm-lsg-colors__color-tile { +.lsg-colors__color-tile { aspect-ratio: 1; border-radius: 16px; display: block; @@ -131,7 +131,7 @@ position: relative; } -.bm-lsg-colors { +.lsg-colors { padding: 10px 15px; } @@ -165,12 +165,12 @@ /* icons */ -.bm-lsg-icon__container { +.lsg-icon__container { display: flex; flex-wrap: wrap; gap: 8px; } -.bm-lsg-icon { +.lsg-icon { width: 140px; background: #f5f5f5; padding: 10px; @@ -180,13 +180,6 @@ justify-content: space-between; } -.bm-e-icon { - width: 80px; - height: 80px; - margin-inline: auto; - cursor: pointer; -} - .icon { position: relative; font-size: 60px; diff --git a/styleguide/main.html b/styleguide/main.html index 9c9f9a50..54f64286 100644 --- a/styleguide/main.html +++ b/styleguide/main.html @@ -5,6 +5,7 @@ + Styleguide @@ -12,67 +13,35 @@
        -
        - -
        - + -
        - - - -
        - -
        - -
        - -
        - -
        - - - -
        - -
        - - - - -
        - -
        - - -
        - - -
        + +
        + +
        + +
        + +
        + +
        + + + +
        + +
        + +
        + +
        + +
        + +
        + +
        diff --git a/styleguide/nav.html b/styleguide/nav.html deleted file mode 100644 index 769f6a05..00000000 --- a/styleguide/nav.html +++ /dev/null @@ -1,82 +0,0 @@ - - - - - - - - - Styleguide - - - -
        - -
        -

        - -

        -
        -
        - - Search icon -
        -
        -
        Basics
        -
        -
        - Button -
        -
        - Colors -
        -
        - Grid -
        -
        - Icons -
        -
        - Typography -
        -
        -
        Elements
        -
        -
        - Image -
        -
        - Link -
        -
        - Media -
        -
        - Footnote -
        -
        -
        Blocks
        -
        -
        - Banner -
        -
        - Features -
        -
        - Posts -
        -
        -
        Components
        -
        -
        - Form -
        -
        - Table -
        -
        -
        - - -