NB: This is an experimental library, nothing is stable at this point

com.itonomi/komponentkassen {:git/sha "63f26047ec9d1e8e611c164f5259f8b706656591"
                             :git/url "https://github.com/itonomi/komponentkassen.git"}

Index

com.itonomi.komponentkassen.shell: behaviourless, low-level components com.itonomi.komponentkassen.core: ui primitives - focused on correctness, flexibility and composability com.itonomi.komponentkassen.convenient: extra convenient APIs for getting up and running quickly com.itonomi.komponentkassen.demo: playground and staging area, not to be used by library consumers

Use in Electric 3 Starter App based application

<link
  rel="stylesheet"
  href="https://altinncdn.no/fonts/inter/v4/inter.css"
/>
<!-- digdir.css may be substituted with another theme
     as generated by https://theme.designsystemet.no -->
<link
  rel="stylesheet"
  href="komponentkassen/itonomi.css"
/>
<link
  rel="stylesheet"
  href="komponentkassen/index.css"
/>
<script type="module" src="https://unpkg.com/@u-elements/u-tags@latest/dist/u-tags.js"></script>
<script type="module" src="https://unpkg.com/@u-elements/u-datalist@latest/dist/u-datalist.js"></script>
<script type="module" src="https://unpkg.com/@u-elements/u-option@latest/dist/u-option.js"></script>

body {
  font-family: 'Inter', sans-serif;
  font-feature-settings: 'cv05' 1; /* Enable lowercase l with tail */
}

Install (wrap-resource "public") middleware.

Update repository from upstream

!!!!!!!!!!!!

NB: this removes resources/public/!!!!!

!!!!!!!!!!!!

VERSION='1.1.0' npm install "@digdir/designsystemet@$VERSION" "@digdir/designsystemet-css@$VERSION" "@digdir/designsystemet-theme@$VERSION"

npx @digdir/designsystemet tokens create \
--main-colors "primary:#0062BA" "accent:#1E98F5" \
--neutral-color "#1E2B3C" \
--support-colors "extra1:#F45F63" "extra2:#E5AA20" \
--border-radius 4 \
--theme "itonomi"

npx @digdir/designsystemet tokens create \
--main-colors "primary:#0062BA" \
--neutral-color "#1E2B3C" \
--border-radius 4 \
--theme "kunnskapsassistenten"

npx @digdir/designsystemet tokens build
rm -rf resources/public/
mkdir -p resources/public/komponentkassen/
cp ./node_modules/@digdir/designsystemet-css/dist/src/index.css resources/public/komponentkassen/
cp -R design-tokens-build/itonomi* resources/public/komponentkassen/
cp -R design-tokens-build/kunnskapsassistenten* resources/public/komponentkassen/

git clone https://github.com/navikt/aksel.git /tmp/aksel_DELETEME
mkdir -p resources/public/komponentkassen/icons
echo 'These icons belong to Nav and are licensed according to https://github.com/navikt/aksel/blob/main/LICENSE' > resources/public/komponentkassen/icons/LICENSE
mv /tmp/aksel_DELETEME/@navikt/aksel-icons/icons/*.svg resources/public/komponentkassen/icons
rm -rf /tmp/aksel_DELETEME

bb generate-icons.bb

HTML -> Electric prompt - I use it with Electric Clojure Hypermind GPT

Convert to Electric Clojure elements. Not a whole fn.

- Let dom/props start on the same line as the element, e.g
  (dom/div (dom/props {...})
    ...)
- Let each prop key-value pair have it's own line, e.g
  (dom/props {:class "ds-validation-message"
              :data-field "validation"
              :id dom-id})
- Remember to wrap dom text nodes in dom/text
- Replace any :id key-value pairs with :id dom-id, e.g
  {:id dom-id}
- Use svg/svg instead of dom/svg
- Within svg/svg, use only svg/<element-name> elements, but keep using dom/props
- Use maps for :style
- For the u- elements do something like for example u-tags -> (dom-u-tags ...)