Suomi.fi tasarım sistemi.

Suomi.fi tasarım sistemi Uygulama sınırı

React bileşen sistemi

Suomi.fi, styled-components ile biçimlendirilen React bileşenleri ve ayrı bir belirteç paketi sunar. 18. sürümde beklenen yazı tipi Source Sans 3 olarak değiştirilmiştir. 17. sürümdeki mevcut sayfalar Source Sans Pro kullanıyor olabilir; paket sürümünü kontrol etmeden bu sayfaların ekran görüntülerini karşılaştırmak, yazı tipiyle ilgili hatalı bir düzeltmeye yol açabilir.

Gömülü önizleme, belgelenmiş tek dosya kalıbının açıkça etiketlenmiş bir HTML/CSS yorumu olmaya devam eder. Aşağıda doğrulanmış geri çağırımı, denetlenen değeri, bağımlılıkları ve yazı tipi içe aktarımlarıyla ayrı bir yerel React FileInput örneği de verilmiştir. Bunlar aynı yerel seçim görevinin iki ayrı uygulamasıdır; yerel örnek, gömülü HTML önizlemeyi geriye dönük olarak React bileşenine dönüştürmez.

Destekleyici belirtimi okuyun

Suomi.fi tasarım sistemi Tipografi ve yazı tipi yükleme

Metinleri okunabilir tutun

Hem mobilde hem masaüstünde belgelenmiş 18px gövde metni boyutunu kullanın. Dar bir görünüm alanı, tüm form açıklamalarını küçültmek için gerekçe değildir. Küçük metin görünümü 16px'tir ve ikincil bilgiler içindir. Lead metni 22px'tir; kompakt görünümde 20px'e düşer. Yalnızca sayfa girişinde kullanın.

Satır kaydırmalarını karşılaştırmadan önce gerekli yazı tipi kalınlıklarını yükleyin. Bileşen paketi Source Sans 3 dosyalarını beklerken bu bağımsız önizleme bilinçli olarak Arial kullanır. Bu değişiklik önizleme notunda belirtilmiştir ve yerel bileşenin birebir görüntüsü olarak sunulmamalıdır.

Destekleyici belirtimi okuyun

Suomi.fi tasarım sistemi Boşluk ve genişlik

Birbirinden farklı iki boşluk ölçeği

Belirteç kaynağı, normal boşlukları iç boşluklardan ayırır. İncelenen JSON'da normal l değeri 25px'tir; l değerini 32px olarak tanımlayan eski bir README örneğini kopyalamayın. İç boşluklar 2px'ten başlar ve farklı bir dizide ilerler. Stil oluştururken yüklenen sürümün gerçek dışa aktarımlarını kullanın.

FileInput için belgelenmiş 600px azami genişlik ve fullWidth seçeneği vardır. Bu, bileşene özgü bir kısıtlamadır; sayfa kapsayıcısının her yerde 600px olması gerektiğini göstermez. Belge kabul formu, açıklayıcı metni etiketine yakın tutarken alanı daha geniş bir düzene yerleştirebilir.

Destekleyici belirtimi okuyun

Suomi.fi tasarım sistemi Dosya seçici yapısı

Metinler bileşen sözleşmesinin bir parçasıdır

Görünür etiket, istenen belgeyi adlandırır. İpucu, kişi dosya seçiciyi açmadan önce desteklenen biçimleri, dosya boyutunu ve adet sınırını açıklar. Bırakma alanı işaretçiyle kullanılabilecek bir kısayol sunar, ancak dosya girişinin yerini almamalıdır. Resmî yönergelerde, seçme denetiminin gizli yerel dosya girişinin etiketi olduğu belirtilir.

Tek dosya modunda seçilen belge, seçicinin ve bırakma alanının yerini alır. Belgenin yanına belirgin bir kaldırma eylemi koyun. Birden çok dosya modu farklı bir liste düzeni kullanır; tek dosya isteyen bir isteğe ek dosyaları sessizce eklemeyin.

• labelText: yalnızca “Yükle” demek yerine istenen kanıtı veya belgeyi adlandırın.
• removeFileText: kaldırma eylemini dosya bağlamında anlaşılır hâle getirin.
• addedFileAriaText: dosya adı duyurulmadan önce seçim bağlamını belirtin.

Destekleyici belirtimi okuyun

Suomi.fi tasarım sistemi Seçim ve kurtarma

Yerel ek durumu makinesi

Örnek, boyutu 5.000.000 baytı aşmayan tek bir PDF dosyasını kabul eder. Bunlar bu atölye senaryosu için seçilmiş uygulama kurallarıdır; paket varsayılanları veya resmî Suomi.fi yükleme politikası değildir. Tarayıcının accept filtresi yalnızca dosya seçiciye ipucu verir; örnek, seçim veya bırakma sonrasında dosya adını ve boyutunu ayrıca denetler.

Geçersiz meta verilerde dosya seçici kullanılabilir durumda kalır ve nasıl düzeltileceği açıklanır. Geçerli bir seçimde ad, textContent kullanılarak gösterilir; bayt sayısı bildirilir ve odak kaldırma denetimine taşınır. Dosyanın kaldırılması, temel giriş değerini temizler, dosya seçiciyi yeniden gösterir ve odağı geri taşır; böylece aynı dosya tekrar seçilebilir.

1. Tam olarak bir dosya seçin veya bırakın; birden çok dosyayı belirli bir mesajla reddedin.
2. Yerel örnek kurallarını denetleyin ve hata mesajını ya da seçilen dosya adını duyurun.
3. Eki kaldırın ve özgün seçim kontrolünü yeniden görüntüleyin.

Destekleyici belirtimi okuyun

Suomi.fi tasarım sistemi Yerel entegrasyon

Uyumlu bağımlılık kümesini yükleyin

Yayımlanan 18.0.0 sürümündeki FileInput uygulaması, onChange işlevini React değişiklik olayıyla değil, bir FileList ile çağırır. Denetimli value değeri, dosya öğesi nesnelerinden oluşan bir dizidir; örnekte kabul edilen her File, { file } nesnesine dönüştürülür. Yerleşik kaldırma işlemi listeyi değiştirdiğinde de aynı geri çağırma çalışır; bu nedenle boş bir FileList, denetimli diziyi temizler. Bu sözleşmeler, yayımlanan dist/esm/core/Form/FileInput/FileInput.js modülünde kontrol edilmiştir.

İlk görüntülemeden itibaren value değerini denetimli tutmak için boş bir diziyle başlayın. Gelen FileList değerini bu diziye dönüştürmeden önce doğrulayın. Bu örnek, adları .pdf ile bitmeyen veya boyutu 5.000.000 baytı aşan dosyaları reddeder ve ret durumunda seçimi temizler. Bunlar örneğe özgü yerel kurallardır; güvenlik denetimi veya Suomi.fi ilkesi değildir. Gerçek bir yüklemeyi kabul etmeden önce sunucu tarafında içerik doğrulaması yine de gereklidir.

Aşağıdaki yerel örnek, Source Sans 3'ü 400 ve 600 ağırlıklarında yükler, React öğesini açıkça belirtilmiş bir kök öğeye bağlar ve kitaplık üzerinden styled-components kullanır. tslib bağımlılığını açıkça ekleyin: 18.0.0 ESM modülleri yardımcılarını içe aktarır ve bu bağımlılık olmadan temiz derleme başarısız olur. Aşağıdaki sabitlenmiş kurulum, eksik çalışma zamanı bağımlılığını ve yazı tipi varlıklarını içerir. Bu varsayılan temalı örnek için ek bir tema sağlayıcısı gerekmez.

Destekleyici belirtimi okuyun

Doğrulanmış belirteç dışa aktarımlarını kullanın

Resmî stiller kılavuzunda suomifiDesignTokens.spacing ve suomifiDesignTokens.colors örnekleri gösterilir. Aşağıdaki örnek, özel bir sarmalayıcı için bu dışa aktarılan yolları kullanır; FileInput iç işleyişinin yerine geçen bir uygulama değildir.

import { suomifiDesignTokens } from 'suomifi-design-tokens';
// Real exported token paths. Use values instead of copying README example numbers.
const attachmentStyle = {
  maxWidth: 600,
  padding: suomifiDesignTokens.spacing.m,
  borderColor: suomifiDesignTokens.colors.highlightBase
};

Kod referansı

Destekleyici belirtimi okuyun

Suomi.fi tasarım sistemi Erişilebilirlik ve duyarlı kullanım

Alanı sürükleme gerektirmeden kullanın

Bırakma alanı belirgin olsa bile klavyeyle kullanılabilen yerel bir dosya girişini koruyun. İpucu ve hata metinlerini aria-describedby ile ilişkilendirin. Sayfanın tamamını yeniden okutmak yerine seçim değişikliklerini ve kaldırma işlemini duyurun. Bir formda aynı türden birden fazla denetim bulunabilecekse kaldırma düğmesi, seçili dosyayı tanımlamalıdır.

Resmî smallScreen özelliği kompakt bir görünüm sağlar. Genel bir kesme noktası tanımlamaz. Bu bağımsız önizleme, gövde metnini 18px'te tutarken uygulamaya özgü 480px dolgu ayarlaması kullanır. Uzun dosya adlarını, yakınlaştırmayı ve çevrilmiş etiketleri test edin; dosya adlarını, tüm sayfayı genişletmeyecek şekilde satıra bölün.

Destekleyici belirtimi okuyun

Suomi.fi tasarım sistemi Üretim sorumlulukları

Seçilen dosya, yüklenmiş dosya demek değildir

Demo, belge içeriğini okumaz veya istek göndermez. Seçilen dosya adı ve bayt sayısı, belgenin geçerli olduğunu, saklandığını ya da kabul edildiğini kanıtlamaz. Gerçek hizmetlerde sunucu tarafında doğrulama, yükleme ilerlemesi, kurtarılabilir hata yönetimi, saklama kuralları ve gerçek bir yanıta bağlı onay gerekir.

Bileşen kodu MIT lisansına sahiptir. Bu kod lisansı, bağımsız bir projeye kendisini Finlandiya devlet hizmeti olarak tanıtma veya kısıtlı kurumsal kimliği kullanma yetkisi vermez. Denemeler için tarafsız bir proje adı kullanın; resmî bir uygulama geliştiriyorsanız uygun marka yönergelerini edinin.

Destekleyici belirtimi okuyun

Suomi.fi tasarım sistemi Bileşen Örnekleri

import { suomifiDesignTokens } from 'suomifi-design-tokens';
// Real exported token paths. Use values instead of copying README example numbers.
const attachmentStyle = {
  maxWidth: 600,
  padding: suomifiDesignTokens.spacing.m,
  borderColor: suomifiDesignTokens.colors.highlightBase
};

<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Attachment example</title><style>*{box-sizing:border-box}body{margin:0;padding:30px 20px;font:18px/1.5 Arial,sans-serif;color:#202020;background:#fff}main{max-width:600px;margin:auto}h1{font-size:32px;line-height:1.2;font-weight:400;margin:0 0 20px}p{margin:0 0 20px}label{font-weight:600;display:block}small{display:block;font-size:16px}.drop{margin-top:15px;border:2px dashed hsl(212,63%,45%);padding:30px;text-align:center;background:hsl(212,63%,90%)}button,input::file-selector-button{font:600 18px Arial;padding:12px 20px;border:1px solid hsl(212,63%,37%);border-radius:2px;background:hsl(212,63%,45%);color:white;cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid #202020;outline-offset:3px}input{width:100%;font-size:16px;margin:15px 0}input::file-selector-button{margin-right:10px}.file{border:1px solid #777;padding:20px;margin:20px 0;overflow-wrap:anywhere}.file button{margin-top:15px;background:white;color:hsl(212,63%,37%)}#error{color:#a32020;font-weight:bold}footer{font-size:14px;margin-top:30px;border-top:1px solid #ccc;padding-top:15px}[hidden]{display:none!important}@media(max-width:480px){body{padding:20px 15px}.drop{padding:20px}h1{font-size:28px}}</style><main><small>COMMUNITY WORKSHOP · ATTACHMENT</small><h1>Add your project outline</h1><p>Choose one PDF up to 5 MB. This local example checks file metadata; it does not read or send the document.</p><div id="picker"><label for="file">Project outline</label><small id="hint">One PDF file. Maximum 5 MB (5,000,000 bytes).</small><input id="file" type="file" accept=".pdf,application/pdf" aria-describedby="hint error"><div class="drop" id="drop">Or drop one PDF here</div></div><p id="error" role="alert" hidden></p><section id="selected" class="file" hidden aria-label="Selected attachment"><strong id="name"></strong><small id="size"></small><button id="remove" type="button">Remove file</button></section><p id="status" role="status">No file selected.</p><footer>OpenDesign interpretation of the Suomi.fi attachment pattern. Arial fallback; no official identity or React component runtime. PDF and 5 MB are example rules.</footer></main><script>const input=document.querySelector('#file'),picker=document.querySelector('#picker'),selected=document.querySelector('#selected'),error=document.querySelector('#error'),status=document.querySelector('#status');function choose(files){error.hidden=true;if(files.length!==1){error.textContent='Choose exactly one file.';error.hidden=false;input.value='';return}const file=files[0];if(!/\.pdf$/i.test(file.name)||file.size>5000000){error.textContent='Choose a PDF no larger than 5 MB.';error.hidden=false;input.setAttribute('aria-invalid','true');input.value='';return}input.removeAttribute('aria-invalid');document.querySelector('#name').textContent=file.name;document.querySelector('#size').textContent=file.size.toLocaleString('en')+' bytes · selected locally';document.querySelector('#remove').setAttribute('aria-label','Remove '+file.name);picker.hidden=true;selected.hidden=false;status.textContent='Selected file: '+file.name;document.querySelector('#remove').focus()}input.addEventListener('change',()=>{if(input.files.length)choose(input.files)});document.querySelector('#drop').addEventListener('dragover',e=>e.preventDefault());document.querySelector('#drop').addEventListener('drop',e=>{e.preventDefault();choose(e.dataTransfer.files)});document.querySelector('#remove').onclick=()=>{input.value='';picker.hidden=false;selected.hidden=true;error.hidden=true;input.removeAttribute('aria-invalid');status.textContent='File removed. Choose another file.';input.focus()};</script></html>

import React, { useState } from 'react';
import { createRoot } from 'react-dom/client';
import { FileInput } from 'suomifi-ui-components';
import '@fontsource/source-sans-3/400.css';
import '@fontsource/source-sans-3/600.css';
import './app.css';
function App() {
  const [value, setValue] = useState([]);
  const [error, setError] = useState('');
  function change(files) {
    const next = Array.from(files);
    const invalid = next.length > 1 || next.some(file => !/\.pdf$/i.test(file.name) || file.size > 5000000);
    if (invalid) {
      setValue([]);
      setError('Choose one PDF no larger than 5 MB.');
      return;
    }
    setValue(next.map(file => ({ file })));
    setError('');
  }
  return <main><h1>Select a workshop document</h1><p>This local example does not upload or read the document.</p>
    <FileInput id="document" labelText="Workshop document" hintText="One PDF, maximum 5 MB (5,000,000 bytes)."
      inputButtonText="Choose PDF" dragAreaText="or drop a PDF here" removeFileText="Remove file"
      addedFileAriaText="Selected file" accept=".pdf" value={value} onChange={change}
      status={error ? 'error' : 'default'} statusText={error} />
    <p role="status">{value.length ? `${value[0].file.name} selected locally.` : 'No file selected.'}</p>
  </main>;
}
createRoot(document.getElementById('root')).render(<App />);

body{margin:0;font:18px/1.5 'Source Sans 3',sans-serif;color:#292929;background:#fff}main{max-width:600px;margin:0 auto;padding:24px}h1{font-size:32px;line-height:1.2}*{box-sizing:border-box}

<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Native Suomi.fi FileInput</title><link rel="stylesheet" href="./app.css"><div id="root"></div><script type="module" src="./app.js"></script></html>