diff --git a/examples/components/my-card/css/my-card.css b/examples/components/my-card/css/my-card.css new file mode 100644 index 0000000000000000000000000000000000000000..2af872873d9ce43c25ce6e0f89959acf1b612ab7 --- /dev/null +++ b/examples/components/my-card/css/my-card.css @@ -0,0 +1,3 @@ +.cl-component--my-card { + max-width: 512px; +} diff --git a/examples/components/my-card/metadata.json b/examples/components/my-card/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..d67b1d14a1aea69357895cfa9f803c8dcda77248 --- /dev/null +++ b/examples/components/my-card/metadata.json @@ -0,0 +1,25 @@ +{ + "$schema": "https://git.drupalcode.org/project/cl_components/-/raw/1.x/src/metadata.schema.json", + "machineName": "my-card", + "name": "Card", + "status": "BETA", + "schemas": { + "props": { + "type": "object", + "required": [ + "header", + "children" + ], + "properties": { + "header": { + "type": "string", + "title": "Header", + "description": "The card header", + "examples": [ + "I am a header!" + ] + } + } + } + } +} diff --git a/examples/components/my-card/my-card.stories.yml b/examples/components/my-card/my-card.stories.yml new file mode 100644 index 0000000000000000000000000000000000000000..c042bebf18ed72560157dfad4646e86ae70cb678 --- /dev/null +++ b/examples/components/my-card/my-card.stories.yml @@ -0,0 +1,6 @@ +title: Deeply/Card +stories: + - name: Default + args: + header: I am a header! + children: Lorem ipsum, dolor sit, amet ra. Quas praesentium inventore necessitatibus et beatae accusamus veniam officiis. Quisquam ut consectetur possimus recusandae. diff --git a/examples/components/my-card/my-card.twig b/examples/components/my-card/my-card.twig new file mode 100644 index 0000000000000000000000000000000000000000..867783db044e78873f40297b8ddf3885e38a6b97 --- /dev/null +++ b/examples/components/my-card/my-card.twig @@ -0,0 +1,6 @@ +<div {{ clAttributes }}> + <h2>{{ header }}</h2> + <div class="cl-components--my-card__body"> + {{ children }} + </div> +</div>