BETA Hej! Denna webbplats är under utveckling. Bidra gärna med feedback!
Stilguide
Bidra

Linkgroup 

<div class="rh-linkgroup">
    <h2 class="h4">
        <button aria-expanded="false" class="rh-linkgroup__titlebar" aria-controls="sect1" id="890890">
			<p class="rh-linkgroup__title">
				Så som ordningens olika dimma
			</p>
			<span class="rh-linkgroup__icon"></span>
		</button>
    </h2>
    <div id="sect1" role="region" aria-labelledby="890890" class="rh-linkgroup__card">
        <ul class="rh-linkgroup__list">
            <li class="rh-linkgroup__list-item">
                <a class="rh-link" href="#" title="Förklara vart länken leder">Fram vi vidsträckt äng</a>
            </li>
            <li class="rh-linkgroup__list-item">
                <a class="rh-link" href="#" title="Förklara vart länken leder">För del om av hav bra samtidigt så</a>
            </li>
            <li class="rh-linkgroup__list-item">
                <a class="rh-link" href="#" title="Förklara vart länken leder">Bland kunde verkligen så bra</a>
            </li>
            <li class="rh-linkgroup__list-item">
                <a class="rh-link" href="#" title="Förklara vart länken leder">Hela färdväg sällan sorgliga dimmhöljd hela när tidigare del</a>
            </li>
        </ul>
    </div>
</div>
 
<div class="rh-linkgroup">
	<h2 class="h4">
		<button aria-expanded="false" class="rh-linkgroup__titlebar" aria-controls="sect1" id="890890">
			<p class="rh-linkgroup__title">
				{{groupTitle}}
			</p>
			<span class="rh-linkgroup__icon"></span>
		</button>
	</h2>
	<div id="sect1" role="region" aria-labelledby="890890" class="rh-linkgroup__card">
		<ul class="rh-linkgroup__list">
			{{#each links}}
				<li class="rh-linkgroup__list-item">
					<a class="rh-link" href="#" title="{{title}}">{{text}}</a>
				</li>
			{{/each}}
		</ul>
	</div>
</div>
 
{
  "groupTitle": "Så som ordningens olika dimma",
  "links": [
    {
      "title": "Förklara vart länken leder",
      "toPage": "",
      "text": "Fram vi vidsträckt äng"
    },
    {
      "title": "Förklara vart länken leder",
      "toPage": "",
      "text": "För del om av hav bra samtidigt så"
    },
    {
      "title": "Förklara vart länken leder",
      "toPage": "",
      "text": "Bland kunde verkligen så bra"
    },
    {
      "title": "Förklara vart länken leder",
      "toPage": "",
      "text": "Hela färdväg sällan sorgliga dimmhöljd hela när tidigare del"
    }
  ]
}
  • Content: 
    .rh-linkgroup {

    &__titlebar {
        /* Positionering */
        align-items: $LINKGROUP__TITLEBAR--ALIGN-ITEMS;

        /* Box-modell/beteende */
        display: $LINKGROUP__TITLEBAR--DISPLAY;
        width: $LINKGROUP__TITLEBAR--WIDTH;
        padding-top: $LINKGROUP__TITLEBAR--PADDING-TOP;
        padding-bottom: $LINKGROUP__TITLEBAR--PADDING-BOTTOM;
        padding-left: $LINKGROUP__TITLEBAR--PADDING-LEFT;
        padding-right: $LINKGROUP__TITLEBAR--PADDING-RIGHT;

        /* Visuellt */
        border-left: $LINKGROUP__TITLEBAR--BORDER-LEFT;
        border-top: $LINKGROUP__TITLEBAR--BORDER-TOP;
        border-right: $LINKGROUP__TITLEBAR--BORDER-RIGHT;
        border-bottom: $LINKGROUP__TITLEBAR--BORDER-BOTTOM;
        background-color: $LINKGROUP__TITLEBAR--BACKGROUND-COLOR;

        /* Typografi */
        font-size: $LINKGROUP__TITLEBAR--FONT-SIZE;
        color: $LINKGROUP__TITLEBAR--COLOR;
        font-weight: $LINKGROUP__TITLEBAR--FONT-WEIGHT;

        /* Blandat/övrigt */
        cursor: $LINKGROUP__TITLEBAR--CURSOR;

        &:focus {
            background: $LINKGROUP__TITLEBAR--FOCUS--BACKGROUND;
            color: $LINKGROUP__TITLEBAR--FOCUS--COLOR;
            outline: $LINKGROUP__TITLEBAR--FOCUS--OUTLINE;
        }

        &--active {
            /* Visuellt */
            background-color: $LINKGROUP__TITLEBAR--ACTIVE--BACKGROUND-COLOR;
            color: $LINKGROUP__TITLEBAR--ACTIVE--COLOR;

            .rh-linkgroup__icon:after {
                /* Visuellt */
                background-color: $LINKGROUP__TITLEBAR--ACTIVE--LINKGROUP__ICON--BACKGROUND-COLOR;

                /* Typografi */
                font-family: $LINKGROUP__TITLEBAR--ACTIVE--LINKGROUP__ICON--FONT-FAMILY;
                color: $LINKGROUP__TITLEBAR--ACTIVE--LINKGROUP__ICON--COLOR;

                /* Blandat/övrigt */
                content: $LINKGROUP__TITLEBAR--ACTIVE--LINKGROUP__ICON--CONTENT;
            }
        }
    }

    &__title {
        /* Box-modell/beteende */
        margin: $LINKGROUP__TITLE--MARGIN;
    }

    &__icon {
        /* Box-modell/beteende */
        margin-left: $LINKGROUP__ICON--MARGIN-LEFT;

        &:after {
            /* Box-modell/beteende */
            padding: $LINKGROUP__ICON--AFTER--PADDING;
            margin-right: $LINKGROUP__ICON--AFTER--MARGIN-RIGHT;

            /* Visuellt */
            border-radius: $LINKGROUP__ICON--AFTER--BORDER-RADIUS;
            background-color: $LINKGROUP__ICON--AFTER--BACKGROUND-COLOR;

            /* Typografi */
            font-family: $LINKGROUP__ICON--AFTER--FONT-FAMILY;
            color: $LINKGROUP__ICON--AFTER--COLOR;
            font-size: $LINKGROUP__ICON--AFTER--FONT-SIZE;

            /* Blandat/övrigt */
            content: $LINKGROUP__ICON--AFTER--CONTENT;
        }
    }

    &__card {
        /* Box-modell/beteende */
        overflow: $LINKGROUP__CARD--OVERFLOW;

        /* Visuellt */
        background-color: $LINKGROUP__CARD--BACKGROUND-COLOR;
        display: $LINKGROUP__CARD--DISPLAY;
        transition: $LINKGROUP__CARD--MAX-HEIGHT;
        -webkit-transition: $LINKGROUP__CARD--WEBKIT-TRANSITION;
    }

    &__list {
        /* Box-modell/beteende */
        margin-left: $LINKGROUP__LIST--MARGIN-LEFT;
        margin-right: $LINKGROUP__LIST--MARGIN-RIGHT;
        padding-top: $LINKGROUP__LIST--PADDING-TOP;
    }

    &__list-item {
        /* Box-modell/beteende */
        margin-bottom: $LINKGROUP__LIST-ITEM--MARGIN-BOTTOM;

        /* Typografi */
        font-size: $LINKGROUP__LIST-ITEM--FONT-SIZE;

        @include medium {
            /* Typografi */
            font-size: $LINKGROUP__LIST-ITEM--MEDIUM--FONT-SIZE;
        }

        @include large {
            /* Typografi */
            font-size: $LINKGROUP__LIST-ITEM--LARGE--FONT-SIZE;
        }
    }
}
  • URL: /components/raw/linkgroup/_linkgroup.scss
  • Filesystem Path: components/Molecules/linkgroup/_linkgroup.scss
  • Size: 3.8 KB
  • Content: 
    {
    "name": "regionhalland/linkgroup",
    "description": "Linkgroup",
    "type": "styleguide-molecule",
    "license": "GPL-3.0",
    "authors": [
        {
            "name": "Region Halland",
            "email": "webbplatser@regionhalland.se"
        }
    ],
    "require": {}
}
  • URL: /components/raw/linkgroup/composer.json
  • Filesystem Path: components/Molecules/linkgroup/composer.json
  • Size: 287 Bytes
  • Content: 
    $(".rh-linkgroup__titlebar").click(function(){
    $(this).parent().next().toggle();
    $(this).toggleClass("rh-linkgroup__titlebar--active");
    $(this).attr('aria-expanded',$(this).attr('aria-expanded')==='true'?'false':'true' );
});
  • URL: /components/raw/linkgroup/linkgroup.js
  • Filesystem Path: components/Molecules/linkgroup/linkgroup.js
  • Size: 237 Bytes
  • Content: 
    /* ******************* */
/* Molekylen Linkgroup */
/* ******************* */

// Linkgroup__titlebar
$LINKGROUP__TITLEBAR--ALIGN-ITEMS: center;
$LINKGROUP__TITLEBAR--BACKGROUND-COLOR: $grey-lightest;
$LINKGROUP__TITLEBAR--BORDER-LEFT: $border-thin--xl $color-primary;
$LINKGROUP__TITLEBAR--BORDER-TOP: 0;
$LINKGROUP__TITLEBAR--BORDER-RIGHT: 0;
$LINKGROUP__TITLEBAR--BORDER-BOTTOM: 0;
$LINKGROUP__TITLEBAR--COLOR: $black;
$LINKGROUP__TITLEBAR--DISPLAY: flex;
$LINKGROUP__TITLEBAR--CURSOR: pointer;
$LINKGROUP__TITLEBAR--FONT-WEIGHT: bold;
$LINKGROUP__TITLEBAR--FONT-SIZE: 100%;
$LINKGROUP__TITLEBAR--PADDING-TOP: $space-3; //em(11);
$LINKGROUP__TITLEBAR--PADDING-BOTTOM: $space-3; //em(11);
$LINKGROUP__TITLEBAR--PADDING-LEFT: $space-3; //em(11);
$LINKGROUP__TITLEBAR--PADDING-RIGHT: $space-1; //em(5);
$LINKGROUP__TITLEBAR--WIDTH: 100%;

$LINKGROUP__TITLEBAR--FOCUS--BACKGROUND: $complementary2-light; // focus
$LINKGROUP__TITLEBAR--FOCUS--COLOR: $black;                    // focus
$LINKGROUP__TITLEBAR--FOCUS--OUTLINE: none;                     // focus
$LINKGROUP__TITLEBAR--ACTIVE--BACKGROUND-COLOR: $color-primary; // active
$LINKGROUP__TITLEBAR--ACTIVE--COLOR: $white;                    // active

// Linkgroup__icon:after
$LINKGROUP__TITLEBAR--ACTIVE--LINKGROUP__ICON--BACKGROUND-COLOR: $white;
$LINKGROUP__TITLEBAR--ACTIVE--LINKGROUP__ICON--FONT-FAMILY: $icon--font-family;
$LINKGROUP__TITLEBAR--ACTIVE--LINKGROUP__ICON--COLOR: $color-primary;
$LINKGROUP__TITLEBAR--ACTIVE--LINKGROUP__ICON--CONTENT: "\e897";

// Linkgroup__title
$LINKGROUP__TITLE--MARGIN: 0;

// Linkgroup__icon
$LINKGROUP__ICON--MARGIN-LEFT: auto;

// Linkgroup__icon:after
$LINKGROUP__ICON--AFTER--BACKGROUND-COLOR: $color-primary;
$LINKGROUP__ICON--AFTER--BORDER-RADIUS: 50%;
$LINKGROUP__ICON--AFTER--COLOR: $white;
$LINKGROUP__ICON--AFTER--CONTENT: "\e8b1";
$LINKGROUP__ICON--AFTER--FONT-FAMILY: $icon--font-family;
$LINKGROUP__ICON--AFTER--FONT-SIZE: $font-size--small; //em(14);
$LINKGROUP__ICON--AFTER--MARGIN-RIGHT: $space-2;
$LINKGROUP__ICON--AFTER--PADDING: $space-2;

// Linkgroup__card
$LINKGROUP__CARD--BACKGROUND-COLOR: $grey-lightest;
$LINKGROUP__CARD--DISPLAY: none;
$LINKGROUP__CARD--MAX-HEIGHT: max-height 0.2s ease-out;
$LINKGROUP__CARD--OVERFLOW: hidden;
$LINKGROUP__CARD--WEBKIT-TRANSITION: max-height 0.2s;

// Linkgroup__list
$LINKGROUP__LIST--MARGIN-LEFT: $space-3; //em(10);
$LINKGROUP__LIST--MARGIN-RIGHT: $space-3; //em(10);
$LINKGROUP__LIST--PADDING-TOP: $space-8; //em(30);

// Linkgroup__list-item
$LINKGROUP__LIST-ITEM--FONT-SIZE: $p-medium;
$LINKGROUP__LIST-ITEM--MARGIN-BOTTOM: $space-8; //em(35);
$LINKGROUP__LIST-ITEM--MEDIUM--FONT-SIZE: $p-medium; // medium
$LINKGROUP__LIST-ITEM--LARGE--FONT-SIZE: $p-large; // large
  • URL: /components/raw/linkgroup/linkgroup.settings.scss
  • Filesystem Path: components/Molecules/linkgroup/linkgroup.settings.scss
  • Size: 2.7 KB

Molekylen “Linkgroup”

Molekylen linkgroup drivs av några rader jQuery. Notera att detta skript är beroende av hur markupen än nästlad så ändra inte på strukturen.

Implementeringsråd

  • Byt ut de två ID:n som idag är statiska mot dynamiska + byt referenserna till båda.
  • Byt ut h2-rubriken mot korrekt rubriknivå i din struktur, men behåll ‘class=”h4” som är visuellt markup.

Versioner

  • 1.0.2 Globala variabler används
  • 1.0.1 “Stabil” status
  • 1.0.0 Settingsfil skapad
  • 1.0.0.20191230 Stor refaktorering: ny markup, nya klassnamn, ny js.
  • 1.0.0.20191121 Flyttat till gitrepo
  • 1.0.0.20191114 Status ändrad till “Inväntar ombyggnad” och skapat README-filen