Hint: if you got lost, you can always check out the corresponding branch for the lab. If you want to start over, you can reset it by typing executing git reset --hard origin/lab-1

We are now ready to create our first component. Let’s start with an easy one, a button component.

• First of all, we need to duplicate the Figma workbook. To do this, follow this link and duplicate the project to your drafts, as shown below:

1. Duplicate the Figma Project to your drafts.

2. Check that you can open and edit the project in your drafts

3. Design a button!

Design specifications:

Background Color: Blue 400
Border Color: Blue 700
Foreground Color: White
Text Size: 13px
Text Padding: 11px 16px
Border radius: 5px

Hint: by pressing Alt or entering the Inspect mode, you can check the spacing of an element to it's surrounding elements:

Where to find the inspect mode:

Your button should now look like this:

4. Create the button component

For the last step of the design part, we need to create an actual component in Figma. You can do this, by pressing the component icon on the top toolbar, or using the keyboard shortcut:

Hint: You need to select both the background and text layer before creating the component.

• To avoid naming collisions, remove the stories folder generated by storybook

The folder is located in src/. Restart storybook after deleting this folder.

• Next, go to your console and run:

ng g component button

This command creates a new Angular module, component and stories file for the button component. Hint: ng g is a shorthand for ng generate.

In our newly generated src/app/button/button.component.ts, we now want to add the following line, to add the label property:

import {Component, Input, OnInit} from '@angular/core';

@Component({
  selector: 'app-button',
  templateUrl: './button.component.html',
  styleUrls: ['./button.component.css']
})
export class ButtonComponent implements OnInit {
+  @Input() public label: string = 'Button Label';

  constructor() { }

  ngOnInit() {
  }

}

Next, change the template of the component (src/app/button/button.component.html) as follows:

- <p>button works!</p>
+ <button>{{ label }}</button>

Finally, add the story file in button.stories.ts:

import type { Meta, StoryObj } from '@storybook/angular';

import { ButtonComponent } from './button.component';

const meta: Meta<ButtonComponent> = {
  title: 'Components/Button',
  component: ButtonComponent,
};

export const Default: StoryObj<ButtonComponent> = {
  args: {},
};

export default meta;

• In Figma, you should have a button component. You can verify that this component looks correct by going to the reference library and comparing your component.
• In Storybook, you should now see an additional story Component / ButtonComponent.
• In Storybook, the button component should display the label Button Label
• In Storybook, the label input should be accessible via the controls panel

button.component.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-button',
  templateUrl: './button.component.html',
  styleUrls: ['./button.component.scss'],
  standalone: true,
})
export class ButtonComponent {
  @Input() public label: string = 'Button Label';
}

button.stories.ts

import type { Meta, StoryObj } from '@storybook/angular';

import { ButtonComponent } from './button.component';

const meta: Meta<ButtonComponent> = {
  title: 'Components/Button',
  component: ButtonComponent,
  tags: ['autodocs'],
};

export const Default: StoryObj<ButtonComponent> = {
  args: {},
};

export default meta;

Hint: if you got lost, you can always check out the corresponding branch for the lab. need the solution, you can reset it by typing executing git reset --hard origin/lab-3