この例では、作成済みの準備に関するトピックを6つ表示します。Government of Canadaのシグネチャ、予約システムとの連携、必須書類に関する主張はありません。実際に検索できる開閉パターンを示すことを目的としています。コンポーネントを再利用しても、そのアプリケーションが公式サービスであることや、Canada.caのすべての要件をコンテンツが満たしていることにはなりません。
import {defineCustomElement as input} from '@gcds-core/components/dist/components/gcds-input.js';
import {defineCustomElement as details} from '@gcds-core/components/dist/components/gcds-details.js';
import {defineCustomElement as button} from '@gcds-core/components/dist/components/gcds-button.js';
import '@gcds-core/components/dist/gcds/gcds.css';
import './canada.css';
input();details();button();
document.getElementById('root').innerHTML=`<main><p class="eyebrow">GC DESIGN SYSTEM / ORIGINAL CONTENT STUDY</p><h1>Prepare for an appointment</h1><p class="lead">Find a preparation topic in this fictional service guide. These are sample explanations, not government requirements.</p><div class="search-row"><gcds-input id="filter" input-id="topic-search" name="topic-search" label="Filter preparation topics" hint="Try time, access or documents." type="search"></gcds-input><gcds-button id="reset" button-role="secondary" type="button">Reset filter</gcds-button></div><div class="layout"><section aria-labelledby="topic-heading"><h2 id="topic-heading">Preparation topics</h2><p id="count" role="status"></p><div id="topics"></div><div id="empty" hidden><h3>No matching topic</h3><p>Try a shorter word or reset the filter.</p></div></section><aside><h2>Before you continue</h2><p>Important information stays visible. Expandable details are reserved for supporting explanations.</p><ol><li>Confirm the purpose of the appointment with the real service.</li><li>Check its current requirements and contact information.</li><li>Ask for help if an instruction is unclear.</li></ol><p class="small">Native GC Design System components 1.6.0. No official identity marks or real service claims are used.</p></aside></div></main>`;
const topics=[['Confirm the time','Check the time and time zone shown in a real booking confirmation. This sample does not contain a live appointment.'],['Review the location','A real service should provide an address or joining instructions. A location belongs in visible booking details, not only inside a collapsed panel.'],['Plan access needs','Ask the service about accessibility arrangements through its official contact route. This sample demonstrates disclosure behavior and does not promise a particular accommodation.'],['Check documents','Follow the actual service’s published document requirements. This authored example intentionally does not invent a list of mandatory identity documents.'],['Keep a reference','If the service provides a booking reference, keep it with your confirmation. Do not paste personal reference numbers into this public specimen.'],['Prepare questions','Write down what you want to understand. In a real service, clear preparation content can reduce the need to remember questions during the appointment.']];const $=id=>document.getElementById(id);const entries=topics.map(([title,text])=>{const el=document.createElement('gcds-details');el.setAttribute('details-title',title);const p=document.createElement('p');p.textContent=text;el.append(p);const wrapper=document.createElement('div');wrapper.append(el);$('topics').append(wrapper);return{el,wrapper,title,text}});function render(q=''){let count=0;for(const item of entries){item.wrapper.hidden=!(item.title+' '+item.text).toLowerCase().includes(q.trim().toLowerCase());if(!item.wrapper.hidden)count++}$('count').textContent=count+' of '+topics.length+' sample topics';$('empty').hidden=count>0}$('filter').addEventListener('gcdsInput',e=>render(e.detail));$('reset').addEventListener('click',()=>{$('filter').value='';render();$('filter').shadowRoot.querySelector('input')?.focus()});render();
npm create vite@latest gc-topics -- --template vanilla
cd gc-topics
npm install
npm install @gcds-core/[email protected]
# Replace src/main.js and add src/canada.css; keep <div id="root"></div>.
npm run dev
あなたのプロジェクト向けプロンプト
AI エージェント用プロンプト
GC Design System 1.6.0を使って、6つのトピックからなる準備ガイドを作成します。正規のタイポグラフィとトークンCSSを読み込み、標準の入力欄、details、ボタンの各コンポーネントを使用します。フィルター後も項目の開閉状態を保持し、結果件数を通知して、確実にリセットできるようにします。重要なコンテンツは常に表示し、サンプルの説明と公式サービスの要件を明確に区別してください。
05
Canada.ca デザインシステム出典と対象範囲
GC Design System 1.6.0を使用した、OpenDesign作成のCanada.caアプリケーション調査です。サンプルのトピックは架空のガイダンスであり、政府の要件でも公式の予約サービスでもありません。
